Tab navigation can well display different content, and can switch the content.
Tab u
<ul
class="tabs"
data-tab>
To create, each option uses the < li > element and adds
.tab-title
Class to create.
提示: The currently selected item can be used 尝试一下 » Vertical tabs can be used 尝试一下 » If you want to set the toggle tag, you can use the < div > element to add Be careful 尝试一下 » Use CSS to customize the effect of tab fading:
.active
Class. 8.16.1. Example ¶
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#">Home</a></li>
<li class="tab-title"><a href="#">Menu 1</a></li>
<li class="tab-title"><a href="#">Menu 2</a></li>
<li class="tab-title"><a href="#">Menu 3</a></li>
</ul>
Vertical tab ¶
.vertical
Class: 8.16.2. Example ¶
<ul class="tabs vertical" data-tab>
Toggle Tab ¶
.content
Class. Add a unique ID to each tab and connect to the list item (< a href= “# menu1” will open the option content of id= “menu1”). Finally, put all the options in the
<div>
Element, the
<div>
Element needs to be added
.tabs-content
Class and initialize the Foundation JS.
.active
Class is automatically added to the currently selected tab: 8.16.3. Example ¶
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#home">Home</a></li>
<li class="tab-title"><a href="#menu1">Menu 1</a></li>
<li class="tab-title"><a href="#menu2">Menu 2</a></li>
<li class="tab-title"><a href="#menu3">Menu 3</a></li>
</ul>
<div class="tabs-content">
<div class="content active" id="home">
<h3>HOME</h3>
<p>Home is where the heart is..</p>
</div>
<div class="content" id="menu1">
<h3>Menu 1</h3>
<p>Some text, blabla</p>
</div>
<div class="content" id="menu2">
<h3>Menu 2</h3>
<p>Some other text.</p>
</div>
<div class="content" id="menu3">
<h3>Menu 3</h3>
<p>Last tab.</p>
</div>
</div>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Tab fade in ¶
8.16.4. Example ¶
.tabs-content > .content.active{
-webkit-animation:fadeEffect 1s;
animation:fadeEffect 1s;
}
@-webkit-keyframes fadeEffect{
from{opacity:0;}
to{opacity:1;}
}
@keyframes fadeEffect{
from{opacity:0;}
to{opacity:1;}
}