<!DOCTYPE html> <html lang="en"> <head> <!-- Le styles --> <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body> <div class="container"> <!--------> <div id="content"> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li> <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> <li><a href="#tab4" data-toggle="tab">Tab 4</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="tab1"> <input type='radio' name='r1'> ข้อ1 <input type='radio' name='r1'> ข้อ2 </div> <div class="tab-pane fade" id="tab2"> <input type='radio' name='r2'> ข้อ1 <input type='radio' name='r2'> ข้อ2 </div> <div class="tab-pane fade" id="tab3"> <input type='radio' name='r3'> ข้อ1 <input type='radio' name='r3'> ข้อ2 </div> <div class="tab-pane fade" id="tab4"> <input type='radio' name='r4'> ข้อ1 <input type='radio' name='r4'> ข้อ2 </div> </div> <div> <a href="javascript:tabPrev();" class="btn">‹ Prev</a> <a href="javascript:tabNext();" class="btn">Next ›</a> </div> <script> var myTab, myTabsActive, tabNext, tabPrev; $(function() { myTabs = $('#myTab li').length; myTabsActive = 0; //or yours active tab tabNext = function() { var index = myTabsActive + 1; index = index >= myTabs ? 0 : index; $('#myTab li:eq(' + index + ') a').tab('show'); myTabsActive = index; } tabPrev = function() { var index = myTabsActive - 1; index = index < 0 ? myTabs - 1 : index; $('#myTab li:eq(' + index + ') a').tab('show'); myTabsActive = index; } }); </script> </div> <!-- container --> </body> </html>
.tab-color-on-radio { background-color: yellow !important; }
$(':radio').on('change', function() { $('#myTab li.active a').addClass('tab-color-on-radio'); });
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
