สามารถสร้างเนื้อหาที่เป็นรูปแบบ tabs หรือที่เรียกว่า dynamic tabs ได้โดยใช้แค่ jQuery และ Bootstrap
ตัวอย่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!doctype html><html><head> <meta charset="utf-8"> <title>Bootstrap: Dynamic Tabs</title> <link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"></head><body> <div class="container"> <h2>Bootstrap: Dynamic Tabs</h2> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="active nav-link show" data-toggle="tab" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu3">Menu 3</a> </li> </ul> <div class="tab-content"> <div id="menu1" class="active fade in show tab-pane"> <h3>Menu 1</h3> <p>นาย</p> </div> <div id="menu2" class="fade tab-pane"> <h3>Menu 2</h3> <p>พิชญ์</p> </div> <div id="menu3" class="fade tab-pane"> <h3>Menu 3</h3> <p>พันธุ์สนิท</p> </div> </div> </div> <script src="../vendor/components/jquery/jquery.min.js"></script> <script src="../vendor/twbs/bootstrap/dist/js/bootstrap.min.js"></script></body></html> |
โดยพื้นฐานคือใส่ data-toggle=”tab” ใน tag a ที่ลิงค์ไปยัง hash ที่เป็น id ของ div ที่มี class tab-pane ที่อยู่ใน div class tab-content ก็จะทำงานได้แล้วโดยไม่ต้องกำหนดสคริปเพิ่มเติมอีก แต่ถ้าหากต้องการเลือกแท็บจากลิงค์ให้อ่าน Bootstrap: dynamic tabs hash เพิ่มเติม
About the author