twitter-bootstrap Bootstrap Nav-tab 显示隐藏内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40138789/
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
Bootstrap Nav-tab show hide content
提问by Dimitri de Ruiter
In the app that I am building to learn Rails and JS, I want to use tab-navigation.
在我为学习 Rails 和 JS 而构建的应用程序中，我想使用选项卡导航。
This is my tab-navigation pointing to 3 sections. I am now looking to create the JavaScript. How to I approach this when clicking the tabs and set class active to the clicked <li>while display the respective section?
这是我指向 3 个部分的选项卡导航。我现在正在寻找创建 JavaScript。单击选项卡并将类活动设置为<li>在显示相应部分时单击时如何处理？
I can't do getElementById or so. So, I need something like this structure:
我不能做 getElementById 左右。所以，我需要这样的结构：
$("li.presentation").on("click", function(event) { ...
$(...).class("active");
$(...).toggle();
};
All help appreciated!
感谢所有帮助！
<nav>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#tab1">Details</a></li>
<% unless @annotation.new_record? %>
<li role="presentation"><a href="#tab2">Tags</a></li>
<li role="presentation"><a href="#tab2">Comments</a></li>
<% end -%>
</ul>
</nav>
Sections
部分
<section id="tab1" class="tab1">
<p>Section 1 content here </p>
</section>
<section id="tab2" class="tab2">
<p>Section 2 content here </p>
</section>
<section id="tab3" class="tab3">
<p>Section 1 content here </p>
</section>
<section id="tab3" class="tab3">
<p>Section 3 content here </p>
</section>
This is my css
这是我的css
.tab1 {
display: block;
}
.tab2 {
display: none;
}
.tab3 {
display: none;
}
回答by StaticBeagle
You don't need to roll out your own custom JavaScriptand cssto accomplish this. You can use Bootstrap'sbuilt-in data-toggle="tab"attribute in your tab anchors.
您不需要推出自己的自定义JavaScript并css完成此操作。您可以在选项卡锚点中使用Bootstrap's内置data-toggle="tab"属性。
<div class="container">
<ul class="nav nav-tabs">
<!-- add data-toggle attribute to the anchors -->
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
Here is a live demo:
http://www.bootply.com/ZSu8N3bB03
这是一个现场演示：http:
//www.bootply.com/ZSu8N3bB03
