javascript - Bootstrap Navbar 颜色在按下时不改变

Question

我想在按下链接时更改事件类，但它似乎不起作用。

<nav class="navbar navbar-default navbar-static-top navbar-inverse">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="active">
                <a href="/">HOME</a>
            </li>
            <li>
                <a href="/test1">TEST1</a>
            </li>
            <li>
                <a href="/test2">TEST2</a>
            </li>
        </ul>
    </div>
</nav>

这是我试过的。但这似乎不起作用。 HOME 始终处于事件状态，无论我按什么。有什么想法吗？

<script>
    $(document).ready(function () {
        $('ul.nav > li > a').click(function () {
            $('ul.nav > li').removeClass('active');
            $(this).parent().addClass('active');
        });
    });
</script>

编辑:它在一些链接更改后起作用。我还有一个问题，如何使事件类在转到其他页面时不会重置回主页？

Answer 1

检查您是否已正确加载 Boostrap 框架(链接和脚本)，它工作正常:

$(document).ready(function () {
    $('ul.nav > li > a').click(function (e) {
        e.preventDefault()
        $('ul.nav > li').removeClass('active');
        $(this).parent().addClass('active');
    });
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top navbar-inverse">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="active">
                <a href="/">HOME</a>
            </li>
            <li>
                <a href="/test1">TEST1</a>
            </li>
            <li>
                <a href="/test2">TEST2</a>
            </li>
        </ul>
    </div>
</nav>