jQuery点击添加或删除类

Question

我有一个导航菜单！

   <div class="nav">
    <ul class="navigation">
    <li class="selected"><a href="#">HOME</a></li>
    <li><a href="#">PROFILE></a></li>
    <li><a href="#">CONTACTUS</a></li>
    <li><a href="#">ABOATUS</a></li>
    </ul>
    </div>

现在如何使用Jquery在单击后添加所选类到任何（个人资料、联系我们、关于我们）并删除所选的主页。

谢谢

- Panaroma

Answer 1

假设您只想要一个类名为 selected 的元素，我建议：

$('ul.navigation li a').click(
    function(e) {
        e.preventDefault(); // prevent the default action
        e.stopPropagation(); // stop the click from bubbling
        $(this).closest('ul').find('.selected').removeClass('selected');
        $(this).parent().addClass('selected');
    });

JS Fiddle演示。

- David Thomas

---

抱歉，您能解释一下 e.stopPropagation() 是如何冒泡到 DOM 树上的吗？这是因为周围的包装器附加了点击事件吗？ - J82

Answer 2

你可以使用toggleClass函数：

$("#myElement1").click(function(){
   $("#myElement2").toggleClass("myClass");
});

- Headshota

Answer 3

$("a").click(function()
{
  $("a").parent().removeClass("selected");

  $(this).parent().addClass("selected");
});

Live Demo

- Baz1nga

---

谢谢，我测试了这个。这适用于哪个ID、类或全部链接？ - Panaroma