如何使用 切换Twitter Bootstrap选项卡窗格？

需要使用select切换选项卡。 什么是最佳做法？ 我的想法是使用onChange事件操纵class .active 。 但我相信必须有更好的东西。

这是一些代码示例：

  Tab 1 Tab 2 Tab 3  
 
 
asd
 
 
 
qwe
 
 
 
asw
 
  

Answer 1

我猜你可以自己调用’show’方法，无论如何。

http://jsfiddle.net/7Wv5h/40/ [更新]

JS：

 // jQuery and Bootstrap loaded, you're here on a $(document).on('ready') scope ! $('#your-select').on('change', function (e) { // With $(this).val(), you can **(and have to!)** specify the target in your  values. $('#the-tab li a').eq($(this).val()).tab('show'); // If you do not care about the sorting, you can work with $(this).index(). // $('#the-tab li a').eq($(this).index()).tab('show'); }); 

HTML：

 
  Home Profile Messages Settings  
 
 
Home
 
Profile
 
Messages
 
Settings
 
 
 
Home content
 
Profile content
 
Messages content
 
Settings content
  

Answer 2

接受的答案适用于一组选项卡。 如果需要使用不同的选择框触发多组选项卡，请使用以下js：

 $('.select-nav').on('change', function(e) { var id = $(this).val(); $('a[href="' + id + '"]').tab('show'); }); 

感谢Flo-Schield-Bobby的灵感！

Answer 3

这是一个您不需要保留链接的解决方案。 只是选择。

 $('#mySelect').on('change', function (e) { var $optionSelected = $("option:selected", this); $optionSelected.tab('show') });  Home Profile Messages Settings  
 
 Home 
 
. Profile 
 
 Messages 
 
 Settings 
  

Answer 4

我需要一个解决方案来处理页面上的多个选项卡，没有其他解决方案适合我。 所以我很快就做到了这个： https ： //gist.github.com/kingsloi/7ab83b6781636df1fbf1

 $(document).ready(function(){ //set the index counter var i = 0; //convert all .nav-tabs, except those with the class .keep-tabs $('.nav-tabs:not(.keep-tabs').each(function(){ //init variables var $select, c = 0, $select = $(''); //add unique class to nav-tabs, so each select works independently $(this).addClass('nav-tabs-index-'+i); //loop though each 
, building each into an , getting the text from the a href $(this).children('li').each(function() { $select.append('' + $(this).text() + ''); c++; }); //insert new  above 
 $(this).before($select); //increase index counter i++ }); //on changing  element $('[class^=mobile-nav-tabs]').on('change', function (e) { //get index from selected option classArray = $(this).attr('class').split(" "); tabIndexArray = classArray[0].split("mobile-nav-tabs-") tabIndex = tabIndexArray[1]; //using boostrap tabs, show the selected option tab $('.nav-tabs-index-'+tabIndex+' li a').eq($(this).val()).tab('show'); }); }); 

可以在这里查看JS小提琴： http ： //jsfiddle.net/kingsloi/96ur6epu/