显示活动内容时，Bootstrap 3 选项卡切换为活动状态

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

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>