bootstraps 'active' buttons not working properly-CodePudding

I'm working on this website here:

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

As you can see, I have a nav-bar with buttons for navigation. Normally, I set all the buttons as links to go to different pages, but to demonstrate the issue I'm having, they are all set to go to the homepage (index.html).

The problem is that when clicking a button other than "about", the green highlighting doesn't highlight the button as "active". When you click on a button, I want it to get the 'active' class and have the green border. Currently, selecting another button does nothing.

HTML:

<div  id="navbarNav">
      <ul id = "navPills" >    
          <li>
            <a href="index.html" id="aboutPill" >ABOUT
            </a>
          </li>
          <li>
            <a href="index.html" id="peoplePill" >
              PEOPLE
            </a>
          </li>
          <li>
            <a href="index.html" id="researchPill" >RESEARCH
            </a>
          </li>
          <li>
            <a href="index.html" id="publicationsPill" >PUBLICATIONS
            </a>
          </li>
          <li>
             <a href="index.html" id="mediaPill" >
            MEDIA
            </a>
          </li>
          <li>
             <a href="index.html" id="teachingPill" >
            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');
})

Thank you.

CodePudding user response：

Try this.

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