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

Vakindu
February 26, 2023
109 views
0 votes
2 Answers

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.

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>

Answers

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers