javascript - Bootstrap 导航栏无法使用 JavaScript 添加事件

Question

我用的是Bootstrap，现在我想在跳转到新页面时为新的导航栏标题添加active，但是active不能动态显示，除非我手动刷新新页面。

Html 代码:

<ul class="nav navbar-nav " data-in="fadeInDown" data-out="fadeOutUp">
  <li class="NavHead active"> <a href="/">Home</a></li>
  <li class="NavHead"> <a href="/questions">Questions</a></li>
  <li class="NavHead"> <a href="/tags" >Tags</a></li>
  <li class="NavHead"> <a href="/knowledges" >Knowledges</a></li>
  <li class="NavHead"> <a href="/company">Company</a></li>
  <li class="NavHead"> <a href="/activity">Activity</a></li>
</ul>

JavaScript 代码:

$(document).ready(function () {
    'use strict';
    $(function () {
        $(".navbar-nav").find(".NavHead").each(function () {
            if ($("a",this).attr("href") === window.location.pathname) {
                $(this).addClass("active");
            } else {
                $(this).removeClass("active");
            }
        });
    });
});

我应该如何修改JS？

Answer 1

当我跳转到新页面时，您可以使用此代码为新导航栏标题添加事件类

$('ul li a').click(function(){
    $('li a').parent().removeClass("active");
    $(this).parent().addClass("active");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>