jquery - 点击时 Jquery addclass/removeclass

Question

当我单击菜单中的元素时，我正在尝试添加一个类 [active]。然后，当我单击菜单中的新项目并将 [active] 类添加到其中时，删除该类 [active]。

我试过了 $(this).removeClass("active").addClass("active");

$(this).toggleClass("active");

基本上我正在尝试制作 hover() 功能，但点击均匀。

编辑：固定 HTML

<ul class="menu">
    <li><span>Three</li>
    <li><span>Two</li>
    <li><span>One</li>
</ul>

score 25 · Accepted Answer

假设一次只有一个active元素，并且没有进一步了解您的 DOM 层次结构。

$('.active').removeClass('active');
$(this).addClass('active');

如果 DOM 层次结构已知，则可以使用更有效的选项。

例如，如果他们都是兄弟姐妹，则可以使用：

$(this).addClass('active').siblings('.active').removeClass('active');

score 9 · Accepted Answer

演示- 工作示例。

更正了您的标记：

<ul class="menu">
  <li><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul>

假设您希望LI标签具有active类。

<script>
$('.menu li').on('click', function(){
    $(this).addClass('active').siblings().removeClass('active');
});
</script>

score 1 · Accepted Answer

试试这个小库，你可以用原生js切换类吗？它会像

var menu = document.querySelector('.menu');
menu.addEventListener('click', function () {
  Elemental.toggleClass(this, 'active');
})

它将根据其存在添加或删除类。

3 回答 3