我已经开始将 Web 编程作为一个项目来学习,我一直很难让我的链接在导航栏上显示为事件状态。我确实从寻找过去提出的类似问题开始,但似乎没有一个答案能解决我的问题。
这是我的代码
<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');
})
希望我的代码不会太时髦,因为我才刚刚开始。任何帮助将不胜感激,非常感谢!
最佳答案
有多个问题...
.nav
标记中任何地方使用的类。它应该是 $('.navbar-nav .nav-link')。 style="color:white"
在将覆盖您使用 active
所做的任何更改的链接上类(class)。 nav-link
中设置为事件状态而不是李,.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
关于twitter-bootstrap - Bootstrap 4 导航栏事件类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50172524/