twitter-bootstrap 如何在 Bootstrap 中设置多个标签导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32103242/
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
How to set up multiple tabs navs in Bootstrap
提问by Langkiller
I am trying to implement a list of data where each of the items, have a tab (pills actually) menu. The problem is that when I do this, they are interfeering with each other, making it only possible to have 1 active tab at a time, even though they have different id's.
我正在尝试实现一个数据列表，其中每个项目都有一个选项卡（实际上是药丸）菜单。问题是，当我这样做时，它们会相互干扰，即使它们具有不同的 ID，一次也只能有 1 个活动选项卡。
Here is how i am doing it:
这是我的做法：
First I have one of the menus of tabs/pills for one of the items in the list:
首先，我有一个选项卡/药丸菜单，用于列表中的项目之一：
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='#vis_opgave1'>Vis opgave</a></li>
<li><a data-toggle='tab' href='#rediger_opgave1'>Rediger Tekst</a></li>
<li><a data-toggle='tab' href='#admin_opgave_billeder1'>Administrer billeder</a></li>
</ul>
</div>
</div>
</div>
And here is the content divs for holding the associated datas:
这是用于保存相关数据的内容 div：
<div id='vis_opgave1' class='tab-pane fade in active'>
<div class='row'>
aaaaaaaa11111111111
</div>
</div>
<div id='rediger_opgave1' class='tab-pane fade'>
<div class='row'>
bbbbbbb11111111
</div>
</div>
<div id='admin_opgave_billeder1' class='tab-pane fade'>
<div class='row'>
cccccccccc1111111
</div>
</div>
I have created a jsfiddle to show you the problem: http://jsfiddle.net/kx96pndg/
我创建了一个 jsfiddle 来向你展示这个问题：http: //jsfiddle.net/kx96pndg/
When one of the tabs is selected, you can see that the active content of the other nav menu dissapears.
选择其中一个标签时，您可以看到其他导航菜单消失的活动内容。
I really hope someone can help me out here. Any help will be greatly appreciated.
我真的希望有人能在这里帮助我。任何帮助将不胜感激。
回答by vanburen
You're missing <div class="tab-content"></div>around the tab-panes. See example.
您缺少<div class="tab-content"></div>选项卡窗格。参见示例。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='#vis_opgave1'>Vis opgave</a>
</li>
<li><a data-toggle='tab' href='#rediger_opgave1'>Rediger Tekst</a>
</li>
<li><a data-toggle='tab' href='#admin_opgave_billeder1'>Administrer billeder</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='vis_opgave1' class='tab-pane fade in active'>
<div class='row'>aaaaaaaa11111111111</div>
</div>
<div id='rediger_opgave1' class='tab-pane fade'>
<div class='row'>bbbbbbb11111111</div>
</div>
<div id='admin_opgave_billeder1' class='tab-pane fade'>
<div class='row'>cccccccccc1111111</div>
</div>
</div>
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='#vis_opgave2'>Vis opgave</a>
</li>
<li><a data-toggle='tab' href='#rediger_opgave2'>Rediger Tekst</a>
</li>
<li><a data-toggle='tab' href='#admin_opgave_billeder2'>Administrer billeder</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='vis_opgave2' class='tab-pane fade in active'>
<div class='row'>aaaaaaaa22222222</div>
</div>
<div id='rediger_opgave2' class='tab-pane fade'>
<div class='row'>bbbbbbb222222222</div>
</div>
<div id='admin_opgave_billeder2' class='tab-pane fade'>
<div class='row'>cccccccccc2222222</div>
</div>
</div>
</div>回答by Edwin Hui
I think you can use this plugin. bootstrap-multitabs
我想你可以使用这个插件。引导程序多标签
