Bootstrap Switch选项卡带有链接中的内容，而不是突出显示Active选项卡

Question

我试图链接到选项卡的内容中的另一个选项卡。链接开关选项卡可以很好，但是旧选项卡仍然突出显示为活动性。我该如何正确执行此操作？

<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <a data-toggle="tab" href="#menu1">This link opens Menu 1</a>
    </div>
  </div>
</div>

演示：单击菜单3，然后在内容中的"菜单1"链接：https://jsfiddle.net/sua8fmpm/

Answer 1

您需要从'tab 3'中删除'活动'类，然后在单击链接时将其添加到'tab 1'中。

您可以单击您自己的代码(例如jQuery(或使用Bootstrap Tab('show'( - 此处的更多信息，它说"选择给定选项卡并显示其关联的内容。选择成为未选择的，其关联的内容被隐藏了。"

类似这样的东西

$("#activate-tab-1").click(function(){
    $("#tab-1").tab('show');
});

演示：https：//jsfiddle.net/0nqx1fyv/1/