I have a long menu, the processing function of the selected menu item is one. All menu items have one common class and different id. In the function, I define the id of the selected menu item, but I can’t think how to change the color of this item.

$('.menu').click(function(event){
var id_menu=event.currentTarget.id; ... }

In id_menu, I have a menu item id in the form: "punkt_1", but how to use it?

    2 answers 2

     event.currentTarget.style.backgroundColor = "lightgreen"; 

     $('.menu').click(function(event) { $('.menu').removeClass("active"); $(this).addClass("active"); }); 
     .menu { border: 1px solid black; width: 200px; } .active { background: lightgreen; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="menu">Item 1</div> <div class="menu">Item 2</div> <div class="menu">Item 3</div>

    • Guys, you're the best! - troall 7:37 pm
    • @troall Agree. We're the best. - Igor

    there is a link to the element to which the function is attached, in the form of this

     $('.menu').click(function() { // устанавливаем всем пунктам меню белый цвет бэкграунда $('.menu').css('background-color', 'white'); // устанавливаем не белый цвет бэкграунда пункту по которому кликнули $(this).css('background-color', 'wheat'); }); 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="menu">1</div> <div class="menu">2</div>

    option without js

     .menu:focus { background-color:wheat; outline:none; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="menu" tabindex="1">1</div> <div class="menu" tabindex="2">2</div> <div class="menu" tabindex="3">3</div>