twitter-bootstrap 页面选项卡上的 Twitter Bootstrap:不隐藏选项卡内容
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7613080/
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 on page tabs: not hiding tab content
提问by BryanB
I'm trying to get the twitter on page tabbed content to work. I have the tabs working with switching around active class on the tabs. I've included jquery and the bootstrap-tabs.js but the following code can't seem to get the tabbed content to hide / display as they should. Any help on what may be a simple fix would be appreciated.
我正在尝试使页面标签内容上的 twitter 正常工作。我有选项卡可以在选项卡上切换活动类。我已经包含了 jquery 和 bootstrap-tabs.js,但下面的代码似乎无法让标签式内容按照它们应该的方式隐藏/显示。任何有关可能是简单修复的帮助将不胜感激。
<div class="span8">
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#2009">2009</a></li>
<li><a href="#2010">2010</a></li>
<li><a href="#2011">2011</a></li>
</ul>
<div class="pill-content">
<div class="active" id="2009">
2009 copy
</div>
<div id="2010">
2010 copy
</div>
<div id="2011">
2011 copy
</div>
</div>
<script>
$(function () {
$('.tabs').tabs()
})
</script>
</div><!-- end span 8 -->
回答by mcintyre321
The bootstrap example is incomplete - you need class="pill-pane" (or maybe tab-pane) on the tab elements with the ids
引导程序示例不完整 - 您需要在带有 id 的选项卡元素上使用 class="pill-pane"(或者可能是 tab-pane)
<div class="span8">
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#2009">2009</a></li>
<li><a href="#2010">2010</a></li>
<li><a href="#2011">2011</a></li>
</ul>
<div class="pill-content">
<div class="active pill-pane" id="2009">
2009 copy
</div>
<div class="pill-pane" id="2010">
2010 copy
</div>
<div class="pill-pane" id="2011">
2011 copy
</div>
</div>
<script>
$(function () {
$('.tabs').tabs()
})
</script>
</div><!-- end span 8 -->
回答by malpaso
If you set the class on the content to class="tab-content" then I think the display:none would work correctly and no need for an inline style.
如果您将内容上的类设置为 class="tab-content" ,那么我认为 display:none 会正常工作并且不需要内联样式。

