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＆＃39;链接内容： https://jsfiddle.net/sua8fmpm/

Answer 1

您需要删除“有效”状态。来自＆＃39; Tab 3＆＃39;的课程并将其添加到标签1＆＃39;当您点击链接时。

你可以点击你自己的代码（例如jQuery）或使用引导标签（＆＃39; show＆＃39;） - 更多信息here，它说＆＃34;选择给定的标签并显示其相关内容。之前选择的任何其他选项卡将被取消选中，其关联的内容将被隐藏。＆＃34;

像这样的东西

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

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

引导开关选项卡，内容中的链接不突出显示活动选项卡

1 个答案: