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