<!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>
01.
function
activeTab(tab){
02.
$(
'.nav-tabs a[href="#'
+ tab +
'"]'
).tab(
'show'
);
03.
};
04.
$(document).ready(
(){
05.
06.
'#change_tab'
).change(
07.
activeTab($(
this
).val());
08.
});
09.
})
.mobile{ display:none; } .pc{ display:block; } @media screen and (max-width: 1200) { .pc{ display:none; } .mobile{ display:block; } }
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง