twitter-bootstrap Bootstrap 4 导航栏活动类

Bootstrap 4 navbar active class

提问by kirkosaur

I have started learning web programming as a project and I've been having a hard time with getting my links to show as active on the navbar. I did start by looking for similar questions asked in the past but none of the answers seemed to fix my problem.

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

Here is my code

这是我的代码

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

and I tried using this javascript I found but it hasn't worked so far

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

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

Hopefully, my code isn't too funky since I am just getting started. Any help would be tremendously appreciated thank you very much!

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

回答by Zim

There are multiple issues...

有多个问题...

1. The selector $('.nav li') does nothing because you have no .navclass used anywhere in the markup. It should be $('.navbar-nav .nav-link').
2. You have style="color:white"on the links which will override any changes you make with the activeclass.
3. You have no CSS for the active class, and by default Bootstrap active class on navbar-dark is going to be white. What color are you trying to set?
4. Set active in the nav-linkinstead of the li,

1. 选择器 $('.nav li') 什么都不做，因为您没有.nav在标记中的任何地方使用任何类。它应该是 $('.navbar-nav .nav-link')。
2. 您拥有style="color:white"的链接将覆盖您对active课程所做的任何更改。
3. 您没有活动类的 CSS，默认情况下，navbar-dark 上的 Bootstrap 活动类将是白色的。你想设置什么颜色？
4. 在nav-link而不是 li 中设置 active ，

---

---

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

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

Demo: https://www.codeply.com/go/I3EjDb74My

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

回答by user3748820

// 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');