แท็บมูลนิธิ
นำทางแท็บสามารถที่ดีมากที่จะแสดงเนื้อหาที่แตกต่างกันและเนื้อหาที่สามารถเปลี่ยน
ใช้แท็บ <ul class="tabs" data-tab> -tab> การสร้างแต่ละตัวเลือก <li> องค์ประกอบและเพิ่ม .tab-title ชั้นเรียนเพื่อสร้าง
เคล็ดลับ: คุณสามารถใช้รายการที่เลือกในปัจจุบัน .active ระดับ
ตัวอย่าง
<ul class = "แท็บ" ข้อมูล -tab>
<ระดับ Li = "แท็บชื่อ งาน"> <a href = "#"> หน้าแรก </ a> </ li>
<li class = "แท็บชื่อ "> <a href = "#"> เมนู 1 </ a> </ li>
<li class = "แท็บชื่อ "> <a href = "#"> เมนู 2 </ a> </ li>
<li class = "แท็บชื่อ "> <a href = "#"> เมนู 3 </ a> </ li>
</ ul>
<ระดับ Li = "แท็บชื่อ งาน"> <a href = "#"> หน้าแรก </ a> </ li>
<li class = "แท็บชื่อ "> <a href = "#"> เมนู 1 </ a> </ li>
<li class = "แท็บชื่อ "> <a href = "#"> เมนู 2 </ a> </ li>
<li class = "แท็บชื่อ "> <a href = "#"> เมนู 3 </ a> </ li>
</ ul>
ลอง»
แท็บแนวตั้ง
แท็บแนวตั้งใช้ .vertical หมวดหมู่:
สลับแท็บ
หากคุณต้องการเปลี่ยนการตั้งค่าแท็บคุณสามารถใช้ <div> บวก .content ระดับ พลัส ID ที่ไม่ซ้ำกันในแต่ละแท็บและเชื่อมต่อไปยังรายการรายการ (<a href = "# menu1" เปิด id = "menu1" เนื้อหาของตัวเลือก) ในที่สุดตัวเลือกทั้งหมดที่เกี่ยวกับเนื้อหา <div> องค์ประกอบที่ <div> องค์ประกอบเพื่อเพิ่ม .tabs-content ชั้นเรียนและเริ่มต้นมูลนิธิ JS
หมายเหตุ .active ชั้นถูกเพิ่มโดยอัตโนมัติไปยังแท็บที่เลือกในปัจจุบัน:
ตัวอย่าง
<ul class = "แท็บ" ข้อมูล -tab>
<ระดับ Li = "แท็บชื่อ งาน"> <a href = "#home"> หน้าแรก </ a> </ li>
<li class = "แท็บชื่อ "> <a href = "# menu1"> เมนู 1 </ a> </ li>
<li class = "แท็บชื่อ "> <a href = "# menu2"> เมนู 2 </ a> </ li>
<li class = "แท็บชื่อ "> <a href = "# menu3"> เมนู 3 </ a> </ li>
</ ul>
<div class = "แท็บเนื้อหา ">
<ระดับ Div = "เนื้อหาที่ใช้งาน" id = "บ้าน">
<h3> หน้าแรก </ h3>
<p> บ้านคือที่ที่หัวใจ เป็น .. </ p>
</ div>
<div class = "เนื้อหา" id = "menu1">
<h3> เมนู 1 </ h3 >
<p> ข้อความบาง blabla < / p>
</ div>
<div class = "เนื้อหา" id = "menu2">
<h3> เมนู 2 </ h3 >
<p> บางข้อความอื่น ๆ . < / p>
</ div>
<div class = "เนื้อหา" id = "menu3">
<h3> เมนู 3 </ h3 >
<p> แท็บสุดท้าย. </ P>
</ div>
</ div>
<! - เตรียมมูลนิธิ JS ->
<script>
$ (เอกสาร) .ready (ฟังก์ชั่น () {
$ (เอกสาร) .foundation ();
})
</ script>
<ระดับ Li = "แท็บชื่อ งาน"> <a href = "#home"> หน้าแรก </ a> </ li>
<li class = "แท็บชื่อ "> <a href = "# menu1"> เมนู 1 </ a> </ li>
<li class = "แท็บชื่อ "> <a href = "# menu2"> เมนู 2 </ a> </ li>
<li class = "แท็บชื่อ "> <a href = "# menu3"> เมนู 3 </ a> </ li>
</ ul>
<div class = "แท็บเนื้อหา ">
<ระดับ Div = "เนื้อหาที่ใช้งาน" id = "บ้าน">
<h3> หน้าแรก </ h3>
<p> บ้านคือที่ที่หัวใจ เป็น .. </ p>
</ div>
<div class = "เนื้อหา" id = "menu1">
<h3> เมนู 1 </ h3 >
<p> ข้อความบาง blabla < / p>
</ div>
<div class = "เนื้อหา" id = "menu2">
<h3> เมนู 2 </ h3 >
<p> บางข้อความอื่น ๆ . < / p>
</ div>
<div class = "เนื้อหา" id = "menu3">
<h3> เมนู 3 </ h3 >
<p> แท็บสุดท้าย. </ P>
</ div>
</ div>
<! - เตรียมมูลนิธิ JS ->
<script>
$ (เอกสาร) .ready (ฟังก์ชั่น () {
$ (เอกสาร) .foundation ();
})
</ script>
ลอง»
แท็บจาง
ใช้ CSS ในการปรับแต่งแท็บจางหายไปในผล:
ตัวอย่าง
.tabs เนื้อหา> .content.active {
-webkit ภาพเคลื่อนไหว: fadeEffect 1s;
ภาพเคลื่อนไหว: 1s fadeEffect;
}
@ -webkit-คีย์เฟรม fadeEffect {
จาก {ทึบ: 0;}
เป็น {ทึบ: 1;}
}
@keyframes fadeEffect {
จาก {ทึบ: 0;}
เป็น {ทึบ: 1;}
}
-webkit ภาพเคลื่อนไหว: fadeEffect 1s;
ภาพเคลื่อนไหว: 1s fadeEffect;
}
@ -webkit-คีย์เฟรม fadeEffect {
จาก {ทึบ: 0;}
เป็น {ทึบ: 1;}
}
@keyframes fadeEffect {
จาก {ทึบ: 0;}
เป็น {ทึบ: 1;}
}
ลอง»