1. Home
  2. Foundation tab

The best Foundation tab Tutorial In 2024, In this tutorial you can learn Vertical tab,Tab switching,Tab Fade,

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 Tools

Other Tools

Online Tutorial

Website Navigation

Foundation tab
10/30