CSS Twitter 引导程序 3 选项卡视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18755714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap 3 tab view
提问by werva
I want to have tab view using twitter bootstrap 3:
我想使用 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>
This code does not work to me. Most of examples on net are not with 3rd version. It would be great if anybody tell me what my problem is or even if giving me a standard working example(with bootstrap 3).
这段代码对我不起作用。网上的大多数例子都不是第三版。如果有人告诉我我的问题是什么，或者给我一个标准的工作示例（使用引导程序 3），那就太好了。
采纳答案by Vikas Ghodke
You can activate tab using data-togglewithout js or with js as shown below. For more info see this documentation.
您可以data-toggle不使用js 或使用 js激活选项卡，如下所示。有关更多信息，请参阅此文档。
See this FiddleAdd id myTabto uland run this below js
看到这个FiddleAdd id myTabto uland run this below js
JS
JS
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
回答by JofryHS
You forgot the data-toggleattribute on your links.
您忘记了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>
Fiddle: http://jsfiddle.net/jofrysutanto/K9LpL/3/
小提琴：http: //jsfiddle.net/jofrysutanto/K9LpL/3/
This is actually in Bootstrap 3.0 documentation as well: http://getbootstrap.com/javascript/#tabs
这实际上也在 Bootstrap 3.0 文档中：http: //getbootstrap.com/javascript/#tabs
Update
更新
As described in comment, data-toggle="pill"and data-toggle="tab"can be used interchangeably depends on the style you're after.
正如评论描述的，data-toggle="pill"并且data-toggle="tab"可以互换使用，取决于你后的风格。
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding the nav and nav-pills classes will apply pill styling.
您只需在元素上指定 data-toggle="tab" 或 data-toggle="pill" 即可激活选项卡或药丸导航，而无需编写任何 JavaScript。将 nav 和 nav-tabs 类添加到选项卡 ul 将应用 Bootstrap 选项卡样式，而添加 nav 和 nav-pills 类将应用药丸样式。
