Question

我已经开始学习网络编程作为一个项目，我一直很难将链接显示为在导航栏上显示为活动状态。我确实从寻找过去提出的类似问题开始，但没有一个答案似乎解决了我的问题。

这是我的代码

<div>
<hr>
    <nav class="container-fluid navbar navbar-expand-sm bg-dark navbar-dark" style="padding-left: 75px; margin-top: -16px;">
        <ul class="navbar-nav">
            <li class="active nav-item">
                <a class="nav-link active" style = "padding-left: 0px; color: white;" href="#">Most Popular</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">News</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">Sports</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">Science</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">Politics</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">Economics</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">Random</a> 
            </li>
            <li class="nav-item">
                <a class="nav-link " style="padding-left: 480px; color: white; " href="#">Log in</a>
            </li>
        </ul>
    </nav>
</div>

我尝试使用我发现的这个javascript但到目前为止还没有用到

$('.nav li').click(function(){
$('.nav li').removeClass('active');
$(this).addClass('active');
})

希望我的代码不是太时髦，因为我刚开始。非常感谢任何帮助，非常感谢！

Answer 1

有多个问题......

选择器$（＆＃39; .nav li＆＃39;）不执行任何操作，因为您没有.nav 在标记中的任何位置使用的类。它应该是$（＆＃39; .navbar-nav .nav-link＆＃39;）。
您的链接上有style="color:white"，这些链接将覆盖您对active课程所做的任何更改。
您没有活动类的CSS，默认情况下，navbar-dark上的Bootstrap活动类将为白色。你试图设置什么颜色？
在nav-link而不是li，

.navbar-dark .nav-item > .nav-link.active  {
    color:white;
}

$('.navbar-nav .nav-link').click(function(){
    $('.navbar-nav .nav-link').removeClass('active');
    $(this).addClass('active');
})

演示：https://www.codeply.com/go/I3EjDb74My

Answer 2

如果导航栏中有相对链接（例如“ / projects”），

// remove any current navbar active classes
$(".navbar .nav-item.active").removeClass('active');
// add active class to proper navbar item that matches window.location
$('.navbar .nav-item a[href="' + location.pathname + '"]').closest('li').addClass('active');

Answer 3

// active nav

// get current url
var location = window.location.href;

// remove active class from all
$(".navbar .nav-item").removeClass('active');

// add active class to div that matches active url
$(".nav-item a[href='"+location+"']").addClass('active');

Bootstrap 4导航栏活动类

3 个答案: