javascript - 单击品牌时 Bootstrap 导航栏不会设置事件页面

Question

我见过很多关于如何在导航栏页面上切换事件类的解决方案，但没有解决将导航栏品牌链接设置为主页时会发生什么的问题，以及如何将主页链接设置为在这种情况下处于事件状态，同时禁用先前处于事件状态的一个。这是导航栏:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header row">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#!/">KitchBlocks</a>
            </div>
            <div class="collapse navbar-collapse navbarCollapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#!/">Home</a>
                    </li>
                    <li>
                        <a href="#!/purchase">Purchase</a>
                    </li>
                    <li>
                        <a href="#!/download">Download</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="http://www.kiche.com/" style="padding:0"><img src="images/a.png" height="32" style="margin-top:1px" ></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

这是 jquery 代码:

<script type="text/javascript">
    $(document).ready(function() {
        $(".nav a").on("click", function(){
            $(".nav").find(".active").removeClass("active");
            $(this).parent().addClass("active");
        });
    });
</script>

再次重现问题:导航到主页，默认情况下“主页”处于事件状态。导航到“下载”，这将变为事件状态。点击重定向到“主页”的品牌链接，但“下载”仍处于事件状态。无论如何要解决这个问题？

Answer 1

这是对您的示例的简单修改。工作 fiddle 是 Here

 $(document).ready(function() {
    $(".nav a").on("click", function(){
        $(".nav").find(".active").removeClass("active");
        $(this).parent().addClass("active");
    });
    $(".navbar-brand").on("click", function(){
        $(".nav").find(".active").removeClass("active");
        $('.nav a[href="#!/"]').parent().addClass("active");
    });
});