引导程序的"活动"按钮无法正常工作

Question

我在这里工作：

https://shmoss.github.io/Gibbs-Lab/index.html

正如你所看到的，我有一个导航栏，里面有导航按钮。通常，我会将所有按钮设置为指向不同页面的链接，但为了证明我遇到的问题，它们都设置为指向主页(index.html(

问题是当点击除"点击"之外的按钮时；大约"；，绿色突出显示不将按钮突出显示为"绿色"；"活动"；。当你点击一个按钮时，我希望它获得"活动"类，并有绿色边框。目前，选择另一个按钮没有任何作用。

HTML:

<div class="collapse navbar-collapse text-left" id="navbarNav">
<ul id = "navPills" class=" nav-pills navbar-nav ml-auto">    
<li>
<a href="index.html" id="aboutPill" class="btn btn-s-md btn-white m-b active">ABOUT
</a>
</li>
<li>
<a href="index.html" id="peoplePill" class="btn btn-s-md btn-white m-b">
PEOPLE
</a>
</li>
<li>
<a href="index.html" id="researchPill" class="btn btn-s-md btn-white m-b">RESEARCH
</a>
</li>
<li>
<a href="index.html" id="publicationsPill" class="btn btn-s-md btn-white m-b">PUBLICATIONS
</a>
</li>
<li>
<a href="index.html" id="mediaPill" class="btn btn-s-md btn-white m-b">
MEDIA
</a>
</li>
<li>
<a href="index.html" id="teachingPill" class="btn btn-s-md btn-white m-b">
TEACHING
</a>
</li>

</ul> 
</div>

CSS：

.btn {
background-color:#f7f7f7 !important;
color:#0c2d1c;
border:none;
}
.btn.active{
background-color:#0c2d1c !important;
color:#f7f7f7 !important;
box-shadow:none !important;
}
.btn:hover{
background-color:#0c2d1c !important;
color:#f7f7f7 !important;
box-shadow:none !important;
}
.btn:focus{
background-color:#0c2d1c !important;
color:#f7f7f7 !important;
box-shadow:none !important;
}

JS:

// .btn is the class of the element you want to change color
var $btns = $('.btn').click(function() {
$btns.removeClass('active');
$(this).addClass('active');
})

Answer 1

试试这个。

$(function(){
var current = location.pathname;
$('.navbar-collapse ul li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
})