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

演示 - 工作实例.

更正了你的标记:

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