เพราะว่า dynamic tabs ของ Bootstrap มันจะไม่เลือก tabs จาก hash หรือเครื่องหมาย # ใน url ถ้าต้องการให้แสดงแท็บที่ต้องการจาก links ต้องเขียน code เพิ่มเติมอีกเล็กน้อย
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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <! doctype html> < html > < head > < meta charset = "utf-8" > < title >Bootstrap: Dynamic Tabs With Hash</ title > < link href = "../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel = "stylesheet" type = "text/css" > </ head > < body > < div class = "container" > < h2 >Dynamic Tabs With Hash</ h2 > < input id = "tabindex" name = "tabindex" type = "text" > < 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 > < script > $(document).ready(function () { let hash = window.location.hash.substr(1); let tabindex = $('#tabindex'); if (hash != tabindex.val()) { $('a[href="#' + hash).click(); tabindex.val(hash); } }); </ script > </ body > </ html > |
เมื่อเปิดหน้าเว็บมาจาก url ที่ใส่ # ของแท็บที่ต้องการมา เช่น http://localhost/snippets/Bootstrap/tabs.dynamic.hash.html#menu2 แท็บก็จะเปิดหน้าที่ถูกต้องตามที่ต้องการ แทนที่จะดูจาก class active เพียงอย่าเดียว