建站
咨詢
售后
建站咨詢
新聞中心
Foundation 選項(xiàng)卡
選項(xiàng)卡導(dǎo)航可以很好的展示不同的內(nèi)容，并可以對內(nèi)容進(jìn)行切換。
成都創(chuàng)新互聯(lián)長期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為羅湖企業(yè)提供專業(yè)的網(wǎng)站設(shè)計制作、網(wǎng)站建設(shè)，羅湖網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
選項(xiàng)卡使用
.tab-title 類來創(chuàng)建。提示:當(dāng)前選中項(xiàng)可以使用 .active 類。
實(shí)例
<
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
>
嘗試一下 ?
垂直的選項(xiàng)卡
垂直選項(xiàng)卡可以使用 .vertical 類:
實(shí)例
<
ul
class=
"tabs vertical"
data-tab
>
嘗試一下 ?
切換選項(xiàng)卡
如果要設(shè)置切換標(biāo)簽，可以使用
.content 類。每個選項(xiàng)卡上加上唯一的 ID, 并連接到列表項(xiàng) ( 元素需要添加 .tabs-content 類，并初始化 Foundation JS。注意 .active 類會自動添加到當(dāng)前選中的選項(xiàng)卡上：
實(shí)例
<
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
>
<
script
>
$(document).ready(function() {
$(document).foundation();
})
<
/script
>
嘗試一下 ?
選項(xiàng)卡淡入
使用 CSS 來自定義選項(xiàng)卡淡入的效果：
實(shí)例
.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;}
}
嘗試一下 ?
名稱欄目：創(chuàng)新互聯(lián)Foundation教程：Foundation選項(xiàng)卡
標(biāo)題鏈接：http://m.fisionsoft.com.cn/article/dhhjjes.html
