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>    

这段代码对我不起作用.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 激活选项卡,如下所示.有关详细信息,请参阅此文档.

看到这个小提琴添加ID myTab来ul运行这个下面的js

JS

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