Javascript Girl
  1. Javascript Girl
  3. Comment basculer les onglets Twitter Bootstrap avec <select> <option>?
Intereting Posts
Déterminez le mode 'Overtype' en utilisant Javascript Envoyer un mot de passe en toute sécurité en utilisant une requête ajax L'objet de formulaire de dialogue modulaire AngularJS est indéfini dans le contrôleur Comment désactiver tous les éléments dans une div ou une table en utilisant jQuery Google Maps – en utilisant map.fitBounds (limites); Liste déroulante dynamique utilisant html et php Afficher et masquer un div lorsque l'élément isin-viewport Comment devrais-je écrire une application Web node.js avec le code côté serveur et côté client? Comment puis-je injecter une chaîne de HTML dans un élément? Comparez la valeur dans deux feuilles de calcul, si les mêmes cellules de copie de 1 et Collez à la 2ème Comment éviter les chevauchements d'étiquettes dans un graphique circulaire D3.js? Comment puis-je créer un téléchargement de fichier personnalisé avec seulement HTML, JS et CSS Les liens tag AngularJS <a> ne fonctionnent pas Impossible de lire Element.prototype dans firefox Passer toutes les valeurs d'un tableau en une fonction en tant que paramètres

Comment basculer les onglets Twitter Bootstrap avec <select> <option>?

Besoin de changer d'onglets avec select . Quelle est la meilleure pratique? Mon idée est de manipuler la classe .active avec l'événement .active . Mais je crois qu'il doit y avoir quelque chose de mieux.

Voici un exemple de 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>

Je suppose que vous pouvez appeler la méthode 'show' vous-même, sur n'importe quel événement.

http://jsfiddle.net/7Wv5h/40/ [mis à jour]

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>

La réponse acceptée fonctionnera pour un seul ensemble d'onglets. Si vous devez déclencher plusieurs jeux d'onglets avec différentes cases de sélection, utilisez les js suivants: 

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

Merci pour l'inspiration de Flo-Schield-Bobby!

J'avais besoin d'une solution pour gérer plusieurs onglets sur la page et aucune autre solution ne me convenait. Je l'ai rapidement fait: 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'); }); });

Peut voir le violon JS ici: http://jsfiddle.net/kingsloi/96ur6epu/