按下时引导导航栏颜色不改变答案

【问题标题】：Bootstrap Navbar color not changing when pressed按下时引导导航栏颜色不改变
【发布时间】：2017-10-30 07:52:53
【问题描述】：

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

<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>

编辑：它在一些链接更改后工作。我还有一个问题，如何使活动类在转到其他页面时不会重置回 HOME？

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap-3

【解决方案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>

【讨论】：

谢谢，它成功了。我还有一个问题，如何使活动类在转到其他页面时不会重置回 HOME？
您可以根据您所在的页面将活动类放到另一个 li 中。Home.html 与 li 活动类，Test1.html 与 li 活动类等
是否可以在保持该功能的同时将此导航栏放入单独的 html 文件中？
如果你用 AJAX 加载其他文件是
一点 javascript 应该可以让您识别您所在的页面并将活动类从导航链接移动到链接。除了使用诸如 Jinja2 (python)、Twig (PHP) 甚至 Mustache and Handlebars (JS) 之类的 AJAX 之外，还有一点关于将导航栏放在单独的文件中，这是使用模板框架的意义所在

【解决方案2】：

我已经测试了您的代码。它的工作。请检查以下内容。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
 $(document).ready(function () {
        $('ul.nav > li > a').click(function () {
            $('ul.nav > li').removeClass('active');
            $(this).parent().addClass('active');
        });
    });
</script>
<style>
 li.active {
    background-color: red;
 }
</style>
</head>
<body>

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

</body>
</html>

【讨论】：

谢谢，它成功了。我还有一个问题，如何使活动类在转到其他页面时不会重置回 HOME？