jQuery Girl
  1. jQuery Girl
  3. Comment basculer les volets d’onglet Twitter Bootstrap avec ?
Intereting Posts
Basculer le texte lorsque le lien est cliqué Affichage d’une valeur de zone de texte dans une autre zone de texte pendant que l’utilisateur tape la valeur dans la zone de texte Modifier la couleur du texte, la couleur du lien hypertexte et l’image avec Javascript Comment remplir un DropDown en utilisant Jquery Ajax Call? Emplacement personnalisé des étiquettes d’erreur à l’aide de jQuery validate (Pour tout ou partie de vos erreurs) Je ne parviens pas à centrer une image dans une div après avoir été chargé avec jquery Comment donner un message de confirmation à l’utilisateur avant ActionLink en fonction de la validation jquery.validate, jquery.metadata et données html5 jQuery SimpleModal: deux contenus modaux différents dans la même page Le plugin jquery.tweet.js ne fonctionne pas, comment afficher les tweets RequireJS + Backbone + jQuery chargé via `script` en interférant avec jQuery chargé via RequireJS Asp net grid view sélectionnez row à l’aide de jquery Recherche d’un élément par ID dans une réponse AJAX avec jQuery JQuery: comment pouvez-vous sélectionner des textes non entourés de balises HTML? Comment envoyer un fichier téléchargé via HttpPostedFileBase avec un ViewModel?

Comment basculer les volets d’onglet Twitter Bootstrap avec ?

Besoin de changer d’onglet 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: 

  Tab 1 Tab 2 Tab 3  
 
 
asd
 
 
 
qwe
 
 
 
asw

Je suppose que vous pouvez appeler la méthode ‘show’ vous-même, quel que soit l’événement.

http://jsfiddle.net/7Wv5h/40/ [mise à 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

HTML: 

 
  
  
 
Home content
 
Profile content
 
Messages content
 
Settings content

La réponse acceptée fonctionnera pour un seul ensemble d’tabs. Si vous devez déclencher plusieurs ensembles d’tabs avec différentes boîtes 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 pour ce Flo-Schield-Bobby!

Voici une solution où vous n’avez pas besoin de garder les liens. Juste le Select. 

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

J’avais besoin d’une solution pour gérer plusieurs tabs sur la page et aucune autre solution ne me convenait. Alors j’ai vite fait ça: 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 '); c++; }); //insert new  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'); }); });
    •

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