javascript - Bootstrap 3 tab toggle active when active content is shown

Question

I have some tabs using bootstrap 3. The way it is setup is there is 2 tab navs that display the same content. What I can't seem to figure out is if say Tab A is active then both Tab A list triggers should have the class Active. Right now it is only on the li trigger that you click.

codepen: https://codepen.io/mDDDD/pen/qBqbRXJ

The way the codepen is setup is not exactly how my project is setup but gives an idea. Currently when you land on my page there is a left tab nav and in the middle is another tab nav section and when you click the center section is hidden and the tab content fades in:

$('.tab-toggle').on('click', function () {
      $('.center-nav-blocks').fadeOut('fast', function () {
        $('.tab-content').fadeIn('fast');

        scrollToElement('.title-row');
      });
    });

question from:https://stackoverflow.com/questions/66054800/bootstrap-3-tab-toggle-active-when-active-content-is-shown

Answer 1

You can use index() method to get the index of li which is clicked then using this index add class to li where index matches.

Demo Code :

$('.tab-toggle').on('click', function() {
  //get index of li which is clicked
  var indexs = $(this).closest('li').index()
  //remove class from others
  $("ul li").not($(this).closest('li')).removeClass("active")
  //add class where indexs same
  $("ul").find("li:eq(" + indexs + ")").not($(this).closest('li')).addClass("active")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<ul class="nav-pills  nav-stacked">
  <li><a class="tab-toggle" href="#tab-a" data-value="#a" data-toggle="tab">Tab A</a></li>
  <li><a class="tab-toggle" href="#tab-b" data-value="#b" data-toggle="tab">Tab B</a></li>
  <li><a class="tab-toggle" href="#tab-c" data-value="#c" data-toggle="tab">Tab C</a></li>
  <li><a class="tab-toggle" href="#tab-d" data-value="#d" data-toggle="tab">Tab D</a></li>
</ul>


<div class="tab-content">
  <div class="tab-pane" data-id="a" id="tab-a">A content</div>
  <div class="tab-pane" data-id="b" id="tab-b">B Content</div>
  <div class="tab-pane" data-id="c" id="tab-c"> C Content
  </div>
  <div class="tab-pane" data-id="d" id="tab-d">D content
  </div>
</div>



<ul class="nav-pills  nav-stacked">
  <li><a class="tab-toggle" href="#tab-a" data-value="#a" data-toggle="tab">Tab A</a></li>
  <li><a class="tab-toggle" href="#tab-b" data-value="#b" data-toggle="tab">Tab B</a></li>
  <li><a class="tab-toggle" href="#tab-c" data-value="#c" data-toggle="tab">Tab C</a></li>
  <li><a class="tab-toggle" href="#tab-d" data-value="#d" data-toggle="tab">Tab D</a></li>
</ul>