Question 11069 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Getting Multiple active links in a Bootstrap List-group Navigation – Jquery

I’m trying to create a page navigation list-group using bootstrap.

When a user clicks on a new link in the list-group, the active status must be removed from the previous link and placed on the new link.

The problem is the the blue active link is not being removed from the previous link and this creates multiple blue active links at the same time, like you see in the picture. I would like to see only one blue active link at the same time.

enter image description here

Could you help me spot the problem with my code?

Thanks!

The code:


<!-- List group -->
<ul class="list-group" id="myList" role="tablist">
  <li class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</li>
  <li class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</li>
  <li class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</li>
  <li class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">A</div>
  <div class="tab-pane" id="profile" role="tabpanel">B</div>
  <div class="tab-pane" id="messages" role="tabpanel">C</div>
  <div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>
Tags:

2

Answers


  1. 0

    So, when you fire click event loop through the other li elements and remove the active class, then add the active class the clicked li item, same with tabs

    const lis = document.querySelectorAll('.list-group-item');
const tabs = document.querySelectorAll('.tab-pane');

lis.forEach(li => {
  li.addEventListener('click', () => {
    lis.forEach(li => li.classList.remove('active'));
    li.classList.add('active');
    const targetTab = document.querySelector(li.getAttribute('href'));
    tabs.forEach(tab => tab.classList.remove('active'));
    targetTab.classList.add('active');
  })
})
    .active {
  color: red;
}
    <!-- List group -->
<ul class="list-group" id="myList" role="tablist">
  <li class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</li>
  <li class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</li>
  <li class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</li>
  <li class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">A</div>
  <div class="tab-pane" id="profile" role="tabpanel">B</div>
  <div class="tab-pane" id="messages" role="tabpanel">C</div>
  <div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>
    Login or Signup to reply.
  2. 0

    Bootstrap has in-built navs that takes care of this. So there is no need to use list-group with custom javascript.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills">
      <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
      <a class="nav-link" data-toggle="pill" href="#profile">Profile</a>
      <a class="nav-link" data-toggle="pill" href="#messages">Messages</a>
      <a class="nav-link" data-toggle="pill" href="#settings">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content">
      <div class="tab-pane fade show active" id="home">A</div>
      <div class="tab-pane fade" id="profile">B</div>
      <div class="tab-pane fade" id="messages">C</div>
      <div class="tab-pane fade" id="settings">D</div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search