jquery - 如何使用jquery切换分配给li元素的事件类

Question

我在 SoF 上发现了几个有同样问题的主题，但就我而言，没有任何效果。请帮我找出错误。这是代码:

<div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Action</a></li>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Projects</a></li>
            </ul>
        </div>
<script>
    $('.nav.navbar-nav li').click(function () {
        if (!$(this).hasClass("active")) {
            $("li.active").removeClass("active");
            $this.addClass("active");
        }

    });
</script>

我也尝试过这个:

 $('.nav.navbar-nav li a').click(function (e) {
        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }
        e.preventDefault();

Answer 1

从所有 li 中删除类，然后添加到单击的类。

<强> Live Demo

$(document).ready(function(){
    $('.nav.navbar-nav li').click(function () {
        $(this).siblings('li.active').removeClass("active"); 
        $(this).addClass("active");
    });
});