Twitter bootstrap 引导切换内容中有链接的选项卡不突出显示活动选项卡

我正在尝试链接到选项卡内容中的另一个选项卡。链接可以很好地切换选项卡，但旧选项卡仍高亮显示为活动。我怎样才能正确地做到这一点

<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>

动态选项卡






家
菜单1
菜单2
菜单3

演示：单击菜单3，然后单击内容中的“菜单1”链接：

---

单击链接时，您需要从“选项卡3”中删除“活动”类，并将其添加到“选项卡1”

您可以在自己的代码中单击（例如jQuery）或使用引导选项卡（“显示”）执行此操作-更多信息，它说“选择给定选项卡并显示其关联内容。以前选择的任何其他选项卡都将被取消选择，其关联内容将被隐藏。”

像这样的

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

---

演示：

好的，谢谢。。。我希望有一个非jQuery方法。。。但这样就可以了。我相信他们的默认行为在这种情况下不起作用，也不能正确地删除/添加活动类，因为tab.js希望“data toggle”元素位于nav tabs部分或其他位置。这就是为什么你必须自己做