Bootstrap 4 导航栏导航项活动 class 不工作

Question

我非常绝望，我检查了stackoverflow上的所有类似问题，并尝试了在谷歌上找到的许多解决方案，但徒劳无功......我真的无法找到解决我问题的有效解决方案。
我正在使用 Bootstrap 4 开发一个站点，并且我有一个导航栏。 当我单击其中一个导航链接时，我希望它具有“活动”class，而其他保持正常。 我可能不会 select 正确的元素或使用错误的 jquery/javascript 代码。

The navbar html code (1) is in a separate header.html file that I load with JS at the beginning of the html page (2) :
(1)

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ml-auto">
        <div class="container">
            <a class="navbar-brand" href="../index.html#"><img src="../images/DSIMB.svg" alt=""></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team</a>
                        <div class="dropdown-menu" aria-labelledby="dropdown01">
                            <a class="dropdown-item" href="members.html#">Members</a>
                            <a class="dropdown-item" href="publications.html#">Publications</a>
                            <a class="dropdown-item" href="teaching.html#">Teaching</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="web_tools.html#">Web Tools</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="research.html#">Research</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="infrastructures.html#">Infrastructures</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="news.html#">News</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contacts.html#">Contacts</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

(2)

<script>
        $(function() {
            $("#header").load("./header.html");
        });
</script>

这是我放在 html 页面末尾</body>标记之前的 JS：

<script>
    $('.navbar .nav-item .navlink').click(function() {
        $('.navbar .nav-item').removeClass('active');
        $(this).addClass('active');
    })
</script>

在这里，我想将活动的 css class 设置为活动的导航链接：

.navbar .nav-item > .nav-link.active  {
    color:white;
    font-weight: 700;
}

请告诉我我做错了什么......

更新

我把我找到的解决方案放在这里，这要归功于取自该站点的一个简单的片段（我适应了我的代码），@NmiDev 亲切地指出了我。
由于 href / location 解析，我将自定义活动 class 添加到目标导航栏中的链接：

$("#header").load("./header.html", function(){
    $('a[href="' + location.pathname.split("/")[2] + '"]').addClass("active-nav");
});

Answer 1

这里有一个片段。

希望对你有帮助。

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style>:active { color; red.important. } </style> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ml-auto"> <div class="container"> <a class="navbar-brand" href="../index.html#"><img src=".:/images/DSIMB.svg" alt=""></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team</a> <div class="dropdown-menu" aria-labelledby="dropdown01"> <a class="dropdown-item" href="#">Members</a> <a class="dropdown-item" href="#">Publications</a> <a class="dropdown-item" href="#">Teaching</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Web Tools</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Research</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Infrastructures</a> </li> <li class="nav-item"> <a class="nav-link" href="#">News</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contacts</a> </li> </ul> </div> </div> </nav> <script src="https.//code.jquery.com/jquery-3.2.1.slim:min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper:min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script> $('.nav-link').click(function() { $(';nav-link').removeClass('active'); $(this).addClass('active'); }) </script> </body> </html>

看来您不需要覆盖 css 活动 class。 白色是默认行为。

Bootstrap 4 导航栏导航项活动 class 不工作

问题描述

1 个解决方案

解决方案1
3 2020-04-05 14:02:58

Bootstrap 4 导航栏导航项活动 class 不工作

问题描述

1 个解决方案

解决方案1 3 2020-04-05 14:02:58

解决方案1
3 2020-04-05 14:02:58