<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Tabs</h3> <div class="pc"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#tab1">Menu 1</a></li> <li><a data-toggle="tab" href="#tab2">Menu 2</a></li> <li><a data-toggle="tab" href="#tab3">Menu 3</a></li> </ul> </div> <div class="mobile"> <select class="form-control" id="change_tab"> <option value="tab1">Tab1</option> <option value="tab2">Tab2</option> <option value="tab3">Tab3</option> </select> </div> <br> <div class="tab-content"> <div id="tab1" class="tab-pane fade in active"> <p><strong>Tab 1</strong></P> </div> <div id="tab2" class="tab-pane fade"> <p><strong>Tab 2</strong> </div> <div id="tab3" class="tab-pane fade"> <p><strong>Tab 3</strong> </div> </div> </div> </body> </html>
function activeTab(tab){ $('.nav-tabs a[href="#' + tab + '"]').tab('show'); }; $(document).ready(function(){ $('#change_tab').change(function(){ activeTab($(this).val()); }); })
.mobile{ display:none; } .pc{ display:block; } @media screen and (max-width: 1200) { .pc{ display:none; } .mobile{ display:block; } }
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
