1

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

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

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

2 ответа 2

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>

2
  • Ребята - вы лучшие!
    – troall
    23 апр 2019 в 19:37
  • @troall Согласен. Мы - лучшие.
    – user176262
    23 апр 2019 в 19:38
1

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.