twitter bootstrap 3 选项卡视图答案

【问题标题】：twitter bootstrap 3 tab viewtwitter bootstrap 3 选项卡视图
【发布时间】：2015-01-29 06:59:29
【问题描述】：

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

<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），那就太好了。

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案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" 可以互换使用，具体取决于您所追求的风格。

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

【讨论】：

+1 这个答案比公认的答案更准确（不需要使用 jQuery 来完成这项工作），只是一个旁注。 OP 使用tabs，示例使用pills。您可以毫无问题地从一个切换到另一个。

【解决方案2】：

您可以使用data-toggle 不带js 或带js 激活选项卡，如下所示。有关详细信息，请参阅此 documentation.

看到这个 Fiddle 将 id myTab 添加到 ul 并在 js 下面运行它

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

【讨论】：