1. Home
  2. Foundation tab

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

<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 tab Use .vertical categories:

Examples

<Ul class = "tabs vertical" data-tab>

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

<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 /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

.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;}
}

Hot Tutorials

Contact US