有沒有辦法用三元運算符在html元素中切換CSS類？

Question

我試圖每次單擊時在列表項上添加一些CSS類。 例如，我有菜單，並且如果選擇了菜單項，則需要將“活動”類添加到菜單項。 三元運算符可能嗎？

我試圖將其添加到列表中的class屬性，但似乎無法正常工作。

這是我嘗試過的：

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

我希望在選擇“活動”類時將其添加到列表中，但是它不起作用。

Answer 1

您應該綁定一個點擊處理程序，並在該點擊處理程序內部打開/關閉“活動”類：

 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> 

Answer 2

這是您問題的解決方案！！！ 使用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;
}