Я пытаюсь добавить класс CSS в элементы списка каждый раз, когда на него нажимают. Например, у меня есть меню, и мне нужно поместить «активный» класс в пункт меню, если он выбран. Можно ли это сделать с троичным оператором?

Я пытался добавить его в атрибут класса внутри списка, но, похоже, он не работает.

Вот что я пробовал:

<li class="regular (('active') ? 'regular' : 'regular active')">Home</li>

Я ожидаю, что «активный» класс будет добавлен в список, когда он выбран, но он не работает.

0
Opie Winston 13 Апр 2019 в 16:38

2 ответа

Лучший ответ

Вы должны привязать обработчик кликов и включить / выключить класс «активный» внутри этого обработчика кликов:

document.querySelector("li").addEventListener("click", function () {
    this.classList.toggle("active");
});
li.active { background: yellow; }
<ul>
    <li class="regular">Home</li>
</ul>

Когда у вас есть более одного такого li элемента:

for (const li of document.querySelectorAll("li")) {
    li.addEventListener("click", function () {
        this.classList.toggle("active");
    });
}
li.active { background: yellow; }
<ul>
    <li class="regular">Home</li>
    <li class="regular">Other</li>
</ul>

Если «активный» класс должен существовать только для одного li одновременно, то:

for (const li of document.querySelectorAll("li")) {
    li.addEventListener("click", function () {
        const active = document.querySelector("li.active");
        this.classList.toggle("active");
        if (active && this !== active) active.classList.toggle("active");
    });
}
li.active { background: yellow; }
<ul>
    <li class="regular">Home</li>
    <li class="regular">Other</li>
</ul>
3
trincot 13 Апр 2019 в 13:54

Вот решение вашего вопроса !!! используя плагин jquery

 $('ul').on('click', 'li a', function() {
    $('ul li a.active').removeClass('active');
    $(this).addClass('active');
});

Используя Javascript, вы можете решить ту же проблему.

function myFunction(e) {
  var elems = document.querySelectorAll(".active");
  [].forEach.call(elems, function(el) {
    el.classList.remove("active");
  });
  e.target.className = "active";
}

Html Идет сюда

   <ul>
      <li ><a href="#" class="active">Home</a></li>
      <li ><a href="#">Blog</a></li>
   </ul>

CSS идет сюда

li a.active{ 
  color:red;
}
0
internthings 17 Апр 2019 в 09:26