单击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>

Answer 1

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

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

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

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

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

Answer 2

DEMO - 工作示例。

更正了你的标记：

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

Answer 3

尝试this small lib，您可以使用本机js切换类吗？ 就像

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

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