[英]Bootstrap Nav-tab show hide content
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. 这是我的标签导航,指向3个部分。 I am now looking to create the JavaScript.
我现在正在寻找创建JavaScript。 How to I approach this when clicking the tabs and set class active to the clicked
<li>
while display the respective section? 单击选项卡并将类激活设置为单击的
<li>
同时显示相应的部分时,如何处理此问题?
I can't do getElementById or so. 我不能做getElementById左右。 So, I need something like this structure:
所以,我需要这样的结构:
$("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;
}
You don't need to roll out your own custom JavaScript
and css
to accomplish this. 您不需要推出自己的自定义
JavaScript
和css
来完成此任务。 You can use Bootstrap's
built-in data-toggle="tab"
attribute in your tab anchors. 您可以在选项卡锚点中使用
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.