Question

我希望使用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>

此代码对我不起作用。 net上的大多数示例都不是第3版。如果有人告诉我我的问题是什么，或者即使给我一个标准的工作示例（使用bootstrap 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

您可以使用data-toggle激活标签，不使用js或使用js，如下所示。有关详情，请参阅 documentation.

查看 Fiddle 将myTab添加到ul并在js

下面运行

JS

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

twitter bootstrap 3选项卡视图

2 个答案: