Question

有人可以告诉我如何使这项工作？

这是Bootstrap实际执行此操作的默认方式，但没有其他示例或方法可以使用简单链接。我尝试了在StackOverflow上提供的几个解决方案，但它们不仅仅处理纯链接。

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

Answer 1

您的tab-pane需要id，而不是第一个嵌套div：

http://jsfiddle.net/j47nd/7/

坏：

<div class="tab-pane fade in active" >
    <div id="tab1"><h1>This is tab 1</h1></div>
</div>

好：

<div class="tab-pane fade in active" id="tab1">
    <div ><h1>This is tab 1</h1></div>
</div>

Answer 2

我已将小提琴更新为以下内容：http://jsfiddle.net/j47nd/9/

基本上你有几乎正确但你有：

<div class="tab-pane">
   <div id="tab1"></div>
</div>
<div>
  <a href="#tab1" data-toggle="tab">Tab 1</a>
</div>

应该是：

<div class="tab-pane" id="tab1">
   <div></div>
</div>
<div>
  <a href="#tab1" data-toggle="tab">Tab 1</a>
</div>

你这里真的只有一个问题。这是将id放在一个孩子＆lt; div＆gt;中。 JavaScript会显示并隐藏＆lt; div＆gt;使用的ID将隐藏在已隐藏的tab-pane div下。

希望有所帮助。

普通URL上的选项卡不起作用

2 个答案: