bootstrap 4 pills not changing color when clicked

Asked By: Anonymous

I’m trying to use this bootstrap pills example but there is no javascript or css that goes along with it. How do I go about highlighting the pills that is clicked. In the example when the pill is clicked it turns purple. I am trying something like the below but it does not work. Thank you.

$('#nav-link').on('click', function(e) {
  this.backgroundColor = 'black';
});

Solution

Answered By: Anonymous

You should toggle a class that sets background.

js

 $('#navbar #nav-link').removeClass("active");
 $(this).addClass('active');      

#navbar is id of your nav-bar.

css

.active { 
    background: black;
}
_x000D_

_x000D_

$("#navbar").on("click", "li", function(e) {
  $('#navbar ul li').removeClass("active");
  $(this).addClass('active');
});

_x000D_

.active {
  background: red;
}

_x000D_

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
https://code.jquery.com/jquery-3.3.1.slim.min.js
<nav class="navbar navbar-light navbar-expand-sm" id="navbar">
  <div class="collapse navbar-collapse" id="navbar-list-2">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Blog</a>
      </li>
    </ul>
  </div>
</nav>

_x000D_

_x000D_

x000D

techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno