Geek asks and answers

How do I switch tabs on the Bootable Twitter tab using <select> <option>?

Need to switch tabs with select. What is the best practice? My idea is to manipulate the class with an .activeevent onChange. But I think that there should be something better.

Here is a sample code:

<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>
+5
source share
4 answers

I guess you can call the 'show' method yourself, anyway.

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

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>
+12
source

The accepted answer will work for one set of tabs. If you need to call several sets of tabs with different selection fields, use the following js:

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

Flo-Schield-Bobby!

+6

Here is a solution where you do not need to maintain links. Just choose.

$('#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>
+1
source

I need a solution to handle multiple tabs on a page, and I didn't like any other solution. So I quickly did this: 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');
});

});

You can see the JS script here: http://jsfiddle.net/kingsloi/96ur6epu/

0
source

More articles:


All Articles