TAB (TAB) โดยการรวมคุณสมบัติข้อมูลบางอย่างคุณสามารถสร้างอินเตอร์เฟส TAB ได้อย่างง่ายดาย
"หากคุณต้องการอ้างอิงฟังก์ชั่นของปลั๊กอินแยกกันคุณต้องอ้างอิงแท็บ js. หรือดังที่ได้กล่าวไว้ในบทภาพรวมปลั๊กอิน bootstrap คุณสามารถอ้างอิง bootstrap.js หรือรุ่นบีบอัดของ bootstrap.min.js"
1. การใช้งาน
คุณสามารถเปิดใช้งานหน้าแท็บได้สองวิธี:
โดยคุณสมบัติข้อมูล: คุณต้องเพิ่ม data-toggle = "tab" หรือ data-toggle = "Pill" ไปยังลิงค์ข้อความ Anchor
การเพิ่มคลาส NAV และ NAV-TABS ลงใน UL จะใช้สไตล์แท็ก bootstrap การเพิ่มคลาส NAV และ NAV-PILLS ลงใน UL จะใช้สไตล์ Capsule Bootstrap
<ul> <li> <a href = "#identifier" data-toggle = "tab"> home </a> </li> ... </ul>
ผ่าน JavaScript: คุณสามารถใช้ JavaScript เพื่อเปิดใช้งานแท็บดังนี้:
$ ('#mytab a') คลิก (ฟังก์ชั่น (e) {e.preventdefault () $ (นี่) .tab ('show')})ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการเปิดใช้งานแต่ละแท็บในรูปแบบที่แตกต่างกัน:
// เลือกหน้าแท็บ $ ('#mytab a [href = "#profile"]') แท็บ ('show') // เลือกหน้าแท็บแรก $ ('#mytab a: แรก') แท็บ ('แสดง') // เลือกหน้าแท็บสุดท้าย $ ('#mytab a: สุดท้าย) A '). แท็บ (' แสดง ')2. ผลกระทบจางหายไป
หากคุณต้องการตั้งค่าเอฟเฟกต์จางสำหรับแท็บให้เพิ่ม. fade ลงในแต่ละ. tab-pane แท็บแรกจะต้องเพิ่มด้วยคลาส. อินที่จะจางหายไปเพื่อแสดงเนื้อหาเริ่มต้นดังที่แสดงในตัวอย่างต่อไปนี้:
<div> <div id = "home"> ... </div> <div id = "svn"> ... </div> <div id = "ios"> ... </div> <div id = "java"> ... </div> </div>
3. วิธี
. $ (). แท็บ: วิธีนี้เปิดใช้งานองค์ประกอบแท็บและคอนเทนเนอร์เนื้อหา หน้าแท็บต้องใช้เป้าหมายข้อมูลหรือ HREF ที่ชี้ไปที่โหนดคอนเทนเนอร์ใน DOM
<ul id = "mytab"> <li> <a href = "#ตัวระบุ" data-toggle = "tab"> home </a> </li> ..... </ul> </ul> <div> <div id = "home"> ... </div> ....
iv. เหตุการณ์
ตารางต่อไปนี้แสดงรายการเหตุการณ์ที่จะใช้ในปลั๊กอินแท็บ (แท็บ) เหตุการณ์เหล่านี้สามารถใช้เป็นตะขอในฟังก์ชั่น
5. ตัวอย่างพื้นฐาน
1. แท็ก
หน้าแท็บเป็นที่รู้จักกันทั่วไปว่าเป็นฟังก์ชั่นแท็บ
// การใช้งานพื้นฐาน <ul> <li> <a href = "#html5" data-toggle = "tab"> html5 </a> </li> <li> <a href = "#bootstrap" data-toggle = "tab"> bootstrap </a> </li> </li> <li> <a href = "#extjs" data-toggle = "tab"> extjs </a> </li></ul> <div style = "padding: 10px;"> <div id = "html5"> ... </div> </div>
// เอฟเฟกต์จางสามารถตั้งค่าและระบุว่าเนื้อหาที่ต้องการจะแสดงโดยค่าเริ่มต้น <div id = "html5"> // นอกจากนี้ยังสามารถแทนที่ด้วยแคปซูล <ul> // data-target
เอฟเฟกต์การเชื่อมโยงหรือไม่มีผลผูกพันจะเหมือนกันกับเป้าหมายข้อมูล
// ใช้ JavaScript และใช้วิธี TAB โดยตรง $ ('#nav a'). on ('คลิก', ฟังก์ชั่น (e) {e.preventdefault (); $ (นี่) .tab ('show');}); // เหตุการณ์, ความคล้ายคลึงกันอื่น ๆ $ ('#nav a'). on ('show.bs.tab', function () {alert ('ฟรีเมื่อโทรไปที่แท็บ!');}); $ ('#nav a'). on ('shown.bs.tab', function () {Alert ('ฟรีเมื่อแสดงแท็บ!');});บทเรียนชุดนี้ได้รวบรวมไว้ใน: Bootstrap พื้นฐานการสอนหัวข้อพิเศษยินดีต้อนรับสู่การคลิกเพื่อเรียนรู้
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานตาราง bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น