Question

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

以下是一些代码示例：

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

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 <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：

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

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')
});



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

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 = $('<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');
});

});

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

Answer 5

感谢您的所有回复。我发现 Nathan Hiemstra 提供的一个是最简单的，并且易于遵循和实施。

但是我注意到它以“一劳永逸”的方式工作。我的意思是，一旦您选择了一个选项并激活了其相应的面板并循环浏览了所有面板，您会注意到面板停止切换（至少在引导程序 4.6.* 中）。

经过一番挖掘，我发现 .tab('show') 方法向选择的选项元素添加了一个“活动”类。有道理，因为我猜这将与一次激活 1 个的导航选项卡一起使用。

无论如何，我的简单修复（不知道它是否有任何副作用）但似乎在调用 .tab('show') 选项元素调用 .removeClass('active') 之后起作用。我认为选择的选项无论如何都是“活动”选项，所以为什么要开设这个课程。但这已经造成了完成和永远工作之间的区别。

希望这个小小的修改有帮助

亲切的问候...

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

5 个答案: