แท็บมูลนิธิ
นำทางแท็บสามารถที่ดีมากที่จะแสดงเนื้อหาที่แตกต่างกันและเนื้อหาที่สามารถเปลี่ยน
ใช้แท็บ <ul class="tabs" data-tab>
-tab> การสร้างแต่ละตัวเลือก <li> องค์ประกอบและเพิ่ม .tab-title
ชั้นเรียนเพื่อสร้าง
เคล็ดลับ: คุณสามารถใช้รายการที่เลือกในปัจจุบัน .active
ระดับ
ตัวอย่าง
<ระดับ 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
ชั้นถูกเพิ่มโดยอัตโนมัติไปยังแท็บที่เลือกในปัจจุบัน:
ตัวอย่าง
<ระดับ 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> บ้านคือที่ที่หัวใจ เป็น th </ 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 ในการปรับแต่งแท็บจางหายไปในผล:
ตัวอย่าง
-webkit ภาพเคลื่อนไหว: fadeEffect 1s;
ภาพเคลื่อนไหว: 1s fadeEffect;
}
@ -webkit-คีย์เฟรม fadeEffect {
จาก {ทึบ: 0;}
เป็น {ทึบ: 1;}
}
@keyframes fadeEffect {
จาก {ทึบ: 0;}
เป็น {ทึบ: 1;}
}
ลอง»