Bootstrap's 'active' buttons not working properly

Question

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

You need JS to handle the states, this is not something magical that happens by itself. Also your HTML is not valid, an id can't be assigned to more than one element — cloned, Apr 09 '22 at 21:13

score 0 · Accepted Answer · answered Apr 09 '22 at 21:36

0

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

answered Apr 09 '22 at 21:36

Marius Gardelli

77
7

I think this worked! Can you please explain a couple things? 1) what is location.pathname? and 2) I don't understand the .indexOf(current) part... thanks! – DiamondJoe12 Apr 09 '22 at 21:57
1

location.pathname gets you the url path. In your case /about.html or any other from the navbar. – Marius Gardelli Apr 09 '22 at 22:08
For the second question, you are checking the what is the current path. – Marius Gardelli Apr 09 '22 at 22:22
https://stackoverflow.com/questions/4597050/how-to-check-if-the-url-contains-a-given-string – Marius Gardelli Apr 09 '22 at 22:22
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 10 '22 at 00:30
Agreed. Can you post a more detailed explanation of the answer, Marius? – DiamondJoe12 Apr 12 '22 at 20:17

Bootstrap's 'active' buttons not working properly

1 Answers1