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

Question

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

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

Answer 1

您可以使用 index() 方法获取被点击的 li 的索引，然后使用此索引将 class 添加到索引匹配的 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>

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

Bootstrap 3 tab toggle active when active content is shown

javascript

jquery

twitter-bootstrap

twitter-bootstrap-3