изменить цвет пункта меню

231

10 февраля 2020, 01:50

У меня длинное меню, функция обработки выбранного пункта меню одна. У всех пунктов меню один общий класс и разные id. В функции я определяю id выбранного пункта меню, но не могу придумать как мне поменять цвет этого пункта.

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

В id_menu у меня id пункта меню в виде: "punkt_1" , но как его использовать?

Answer 1

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>

Answer 2

есть ссылка на элемент к которому привязана функция, в виде 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>

вариант без 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>