如何使Bootstrap导航栏更改活动状态？

Question

如何使Bootstrap导航栏更改活动状态？

javascripthtmlnavbar

6

我是HTML和JavaScript的新手，现在我面临一个问题，我认为你们许多人自己也在处理。

我有一个导航栏，当我点击不同的页面链接时，默认情况下不会改变活动状态。

"主页"导航项默认为活动状态，我想在单击其他导航项时更改活动状态。但是我不知道该如何做？据我所知，这不需要太多代码，但我希望在这里得到一些协助。

这是我的代码：

<head>
    <meta charset="UTF-8">
    <title>MaU Movie database</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://bootswatch.com/4/cyborg/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="mumdblogo.png">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="index.html" id="movielogo"><img src="moviefylogo.png"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor02">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="index.html">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="library.html">Library</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="uploads.html">Uploads</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about.html">About</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h3 class="text-center">Search Movie!</h3>
            <form id="searchForm">
                <input type="text" class="form-control" id="searchText" placeholder="Search for any movie...">
            </form>
        </div>
    </div>

    <div class="container">
        <div id="movies" class="row">
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="main.js"></script>

</body>
</html>

- Jens O. Anders Olsén

你可以移除默认的活动类，然后使用 Javascript 根据当前页面的 URL 应用活动类。 - Craig van Tonder

请查看此链接，您将找到有关您问题的解决方案：https://dev59.com/Z2Up5IYBdhLWcg3wvpYM。 - Arunachalam E

请查看此链接以获取帮助：https://dev59.com/6Wox5IYBdhLWcg3wSCfk - Akshath Kumar

2个回答

2

我认为最简单的解决方案是检查窗口中 location 对象的 pathname 并相应地更改导航栏状态。

像这样的代码可以工作：

var pathname = window.location.pathname,
pages = ['home', 'library', 'uploads','about'];

$('.nav-item').each(function(i) {
 if (pathname.includes(pages[i])) this.addClass('active');
 else if (this.className.includes('active')) this.removeClass('active');
});

- ggwzrd

当我尝试它时，出现了以下错误：未捕获的类型错误：this.removeClass不是一个函数。 - Jens O. Anders Olsén

这意味着this不是一个JQuery元素。尝试用console.log(this)替换this.removeClass('active')并检查控制台中打印出的内容。还可以尝试添加$(document).ready(function() { [..code in the post..] })，也许js运行时窗口还没有加载。 - ggwzrd

这对于 swup.js 非常有用，因为当页面更改时，swup.js 不会更新页眉样式，手动使用您的代码片段进行更新非常有效！谢谢！ - Semicolon

没问题 @分号 :) - ggwzrd

太棒了！我也遇到了一些关于'this'的问题，然后我把它换成了'$（this）'，问题就解决了。我必须使用浏览器控制台，并使用console.log（）进行大量测试才能让这对我的用例起作用，但最终效果非常好！从中学到了很多东西！ - yeamusic21

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SlaWitDev · Accepted Answer

您可以在代码末尾执行此操作。只需在 <script src="main.js"></script> 下面即可。

<script>
$(document).ready(function() {
    $( ".mr-auto .nav-item" ).bind( "click", function(event) {
        event.preventDefault();
        var clickedItem = $( this );
        $( ".mr-auto .nav-item" ).each( function() {
            $( this ).removeClass( "active" );
        });
        clickedItem.addClass( "active" );
    });
});
</script>

这段代码的作用是，当用户点击某个项目时，它会改变活动类，而不是跟随链接（event.preventDefault()），例如about.html或uploads.html。

编辑1：

对于静态页面（或由php提供服务的页面），您不需要任何额外的js代码，但您应该调整导航栏，使其看起来像下面的示例（请查看“active”类所在的位置，sr-only span current是可选的，但在示例中放置得很好）。

index.html（您的基本代码）

<ul class="navbar-nav mr-auto">
    <li class="nav-item active">
        <a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="library.html">Library</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="uploads.html">Uploads</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="about.html">About</a>
    </li>
</ul>

library.html

<ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item active">
        <a class="nav-link" href="library.html">Library<span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="uploads.html">Uploads</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="about.html">About</a>
    </li>
</ul>

uploads.html

<ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="library.html">Library</a>
    </li>
    <li class="nav-item active">
        <a class="nav-link" href="uploads.html">Uploads<span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="about.html">About</a>
    </li>
</ul>

about.html

<ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="library.html">Library</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="uploads.html">Uploads</a>
    </li>
    <li class="nav-item active">
        <a class="nav-link" href="about.html">About<span class="sr-only">(current)</span></a>
    </li>
</ul>