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;
}

有没有办法用三元运算符在html元素中切换CSS类？

2 个答案: