Latest web development tutorials

Foundation 選項卡

選項卡導航可以很好的展示不同的內容，並可以對內容進行切換。

選項卡使用<ul class="tabs" data-tab>來創建,各個選項使用<li>元素並加上.tab-title類來創建。

提示:當前選中項可以使用.active類。

實例

< 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類:

實例

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

嘗試一下»

切換選項卡

如果要設置切換標籤，可以使用<div>元素加上.content類。 每個選項卡上加上唯一的ID, 並連接到列表項(<a href="#menu1" 將打開id="menu1" 的選項內容)。 最後將所有的選項內容放在<div>元素上，該<div>元素需要添加.tabs-content類，並初始化Foundation JS。

注意.active類會自動添加到當前選中的選項卡上：

實例

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

嘗試一下»

選項卡淡入

使用CSS 來自定義選項卡淡入的效果：

實例

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

嘗試一下»