Bootstrap 的 'active' 按钮无法正常工作

Question

我在这个网站上工作：

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

如您所见，我有一个带有导航按钮的导航栏。通常，我将所有按钮设置为链接以转到不同的页面，但为了演示我遇到的问题，它们都设置为转到主页 (index.html)。

问题是，当单击“关于”以外的按钮时，绿色突出显示不会将按钮突出显示为“活动”。当您单击一个按钮时，我希望它获得 'active' class 并具有绿色边框。目前，选择另一个按钮没有任何作用。

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

Bootstrap 的 'active' 按钮无法正常工作

Bootstrap's 'active' buttons not working properly

html

css

button

bootstrap-4