Foundation tab
Tab navigation can be very good to show different content, and the content can be switched.
Tab Use the <ul class="tabs" data-tab>
-tab> to create each option <li> element and add .tab-title
class to create.
Tip: You can use the currently selected item .active
class.
Examples
<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 tab Use .vertical
categories:
Examples
Tab switching
If you want to change the setting tab, you can use the <div> element plus .content
class. Plus a unique ID on each tab, and connect it to the list item (<a href = "# menu1" opens id = "menu1" option content). Finally, all of the options on the content <div>
on the element, the <div>
element to add .tabs-content
class, and initializes Foundation JS.
Note .active
class is automatically added to the currently selected tab:
Examples
<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 /en </ 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
Use CSS to customize tabs fade in effect:
Examples
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
@ -webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}