css - twitter bootstrap 3 选项卡视图

Question

我想使用 twitter bootstrap 3 来查看标签视图：

http://jsfiddle.net/K9LpL/2/

<ul class="nav nav-tabs">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
</ul>

    <div id='content' class="tab-content">
      <div class="tab-pane active" id="home">
        <ul>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
        </ul>
      </div>
      <div class="tab-pane" id="profile">
        <ul>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
        </ul>
      </div>
      <div class="tab-pane" id="messages">
      </div>
      <div class="tab-pane" id="settings"></div>
    </div>    

这段代码对我不起作用。网上的大多数例子都不是第 3 版。如果有人告诉我我的问题是什么，或者即使给我一个标准的工作示例（使用引导程序 3），那就太好了。

Answer 1

您忘记了data-toggle链接上的属性。

<ul class="nav nav-pills">
  <li class="active"><a href="#home" data-toggle="pill">Home</a></li>
  <li><a href="#profile" data-toggle="pill">Profile</a></li>
   <li><a href="#messages" data-toggle="pill">Messages</a></li>
</ul>

小提琴：http: //jsfiddle.net/jofrysutanto/K9LpL/3/

这实际上也在 Bootstrap 3.0 文档中： http: //getbootstrap.com/javascript/#tabs

更新

如评论中所述，data-toggle="pill"并且data-toggle="tab"可以互换使用取决于您所追求的风格。

只需在元素上指定 data-toggle="tab" 或 data-toggle="pill" 即可激活选项卡或药丸导航，而无需编写任何 JavaScript。将 nav 和 nav-tabs 类添加到标签 ul 将应用 Bootstrap 选项卡样式，而添加 nav 和 nav-pills 类将应用药丸样式。

Answer 2

您可以使用不使用 js 或使用 js 来激活选项卡data-toggle，如下所示。有关更多信息，请参阅此文档。

请参阅此Fiddle添加 idmyTab并ul在 js 下面运行

JS

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})