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

如何解决显示活动内容时，Bootstrap 3 选项卡切换处于活动状态

我有一些使用 bootstrap 3 的选项卡。它的设置方式是有 2 个选项卡导航显示相同的内容。我似乎无法弄清楚的是，如果说 Tab A 处于活动状态，那么两个 Tab A 列表触发器都应该具有 Active 类。现在只有在你点击的 li 触发器上。

代码笔：https://codepen.io/mDDDD/pen/qBqbRXJ

codepen 的设置方式并不完全是我的项目的设置方式，而是提供了一个想法。目前，当您登陆我的页面时，有一个左侧标签导航，中间是另一个标签导航部分，当您单击中心部分时，该部分被隐藏并且标签内容淡入：

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

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

解决方法

您可以使用 index() 方法获取被点击的 li 的索引，然后使用此索引将类添加到索引匹配的 li。

演示代码：

$('.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>