jQuery 如何使用 <select> <option> 切换 Twitter Bootstrap 选项卡窗格？

How to toggle Twitter Bootstrap tab panes with <select> <option>?

提问by Demuri Celidze

Need to switch tabs with select. What's the best practice? My idea is to manipulate class .activewith onChangeevent. But I believe there must be something better.

需要切换标签select。最佳做法是什么？我的想法是.active用onChange事件来操作类。但我相信一定有更好的东西。

Here's some code sample:

这是一些代码示例：

<select id="mySelect">
<option value="tab1">Tab 1</option>
<option value="tab2">Tab 2</option>
<option value="tab3">Tab 3</option>
</select>

<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade in active" id="tab1">
    <div id="calendari_3">asd</div>
  </div>
  <div class="tab-pane fade" id="tab2">
    <div id="calendari_1">qwe</div>
  </div>
  <div class="tab-pane fade" id="tab3">
    <div id="calendari_2">asw</div>
  </div>
</div>

回答by Flo Schild

I guess you can call the 'show' method yourself, on any event.

我想您可以在任何事件中自己调用 'show' 方法。

http://jsfiddle.net/7Wv5h/40/[updated]

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

JS:

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 <option> 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:

HTML：

<form>
    <select id='mySelect'>
        <option value='0'>Home</option>
        <option value='1'>Profile</option>
        <option value='2'>Messages</option>
        <option value='3'>Settings</option>
    </select>
</form>
<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="home">Home content</div>
    <div class="tab-pane" id="profile">Profile content</div>
    <div class="tab-pane" id="messages">Messages content</div>
    <div class="tab-pane" id="settings">Settings content</div>
</div>

回答by souporserious

The accepted answer will work for a single set of tabs. If you need to trigger multiple sets of tabs with different select boxes, use the following js:

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

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

Thanks for the inspiration for this Flo-Schield-Bobby!

感谢 Flo-Schield-Bobby 的灵感！

回答by Nathan Hiemstra

Here's a solution where you don't need to keep the links. Just the Select.

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

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



<select class="form-control" id="mySelect">
    <option data-target="#home">Home</option>
    <option data-target="#profile">Profile</option>
    <option data-target="#messages">Messages</option>
    <option data-target="#messages">Settings</option>
</select>        


<div class="tab-content">
  <div class="tab-pane active" id="home">
    Home
  </div>
  <div class="tab-pane" id="profile">.
    Profile
  </div>
  <div class="tab-pane" id="messages">
    Messages
  </div>
  <div class="tab-pane" id="settings">
    Settings
  </div>
</div>

回答by Kingsley

I needed a solution to handle multiple tabs on the page and no other solution suited me. So I quickly made this: https://gist.github.com/kingsloi/7ab83b6781636df1fbf1

我需要一个解决方案来处理页面上的多个选项卡，但没有其他解决方案适合我。所以我很快做了这个：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 = $('<select class="mobile-nav-tabs-' +i+ ' mobile-tab-headings "></select>');

    //add unique class to nav-tabs, so each select works independently
    $(this).addClass('nav-tabs-index-'+i);

    //loop though each <li>, building each into an <option>, getting the text from the a href
    $(this).children('li').each(function() {
        $select.append('<option value="'+c+'">' + $(this).text() + '</option>');
        c++;
    });

    //insert new <select> above <ul nav-tabs>
    $(this).before($select);

    //increase index counter
    i++
});

//on changing <select> 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');
});

});

Can view the JS fiddle here: http://jsfiddle.net/kingsloi/96ur6epu/

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