单击品牌时，引导导航栏未设置活动页面

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

这是您的示例的简单修改。工作小提琴是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");
    });
});