Блог

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

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

Это то, что я пробовал:

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

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

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

 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 amp;amp; this !== active) active.classList.toggle("active");
    });
}  

 li.active { background: yellow; }  

 <ul>
    <li class="regular">Home</li>
    <li class="regular">Other</li>
</ul>  

Вот решение вашего вопроса!!! использование плагина 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;
}