La modification de la classe active ainsi que le contenu de la valeur liquidative pilules

Fondamentalement, je suis en train de créer un "assistant" via bootstrap où l'onglet actif est modifiée lorsque le bouton "continuer" est cliqué. J'ai réussi à venir avec le code suivant:

<div id="rootwizard">
   <div class="navbar">
      <div class="navbar-inner">
         <div class="container">
            <ul class="nav nav-pills">
               <li class="active"><a href="#step1" data-toggle="tab">Step 1</a></li>
               <li><a href="#step2" data-toggle="tab">Step 2</a></li>
               <li><a href="#step3" data-toggle="tab">Step 3</a></li>
            </ul>
         </div>
      </div>
   </div>
   <div class="tab-content">
      <div class="tab-pane" id="step1">
         <a class="btn" href="#step2" data-toggle="tab">Continue</a>
      </div>
      <div class="tab-pane" id="step2">
         Step 2
         <a class="btn" href="#step3" data-toggle="tab">Continue</a>
      </div>
      <div class="tab-pane" id="step3">
         Step 3
      </div>
   </div>
</div>

Pour l'instant il fonctionne très bien lorsque je clique sur la valeur liquidative pilules d'eux-mêmes (les changements de contenu et de l'actif de la pilule trop de changements).
Cependant lorsque je clique sur la personne de bouton continuer les modifications de contenu mais de l'actif nav pilule ne change pas.

Pourquoi ne pas l'actif, le changement de classe comme quand je clique sur la pilule elle-même?

Voici un jsFiddle avec le code:
http://jsfiddle.net/MvY4x/5/

Créer un jsfiddle... sinon pas d'aide, je suppose
J'ai inséré le code dans un jsFiddle mais je ne pouvais pas obtenir le bootstrap js à travailler là-bas pour une raison étrange. Ajouté le jsFiddle pour le thread.
Vous avez besoin d'ajouter du framework jQuery pour jsfiddler. Voir ici
Ahh je vois. J'ai mis à jour le jsFiddle maintenant.
Est-ce possible ce que vous êtes la réalisation avec bootstrap? Toutefois, si vous avez besoin de jquery solution?

OriginalL'auteur Jamie Romeo | 2014-02-09

  1. 4

    Vous pouvez utiliser jQuery pour activer l'onglet suivant et son contenu. Donner à tous de vos boutons d'une classe comme "continuer", puis vous pouvez faire quelque chose comme ça..

    $('.continue').click(function(){

  var nextId = $(this).parents('.tab-pane').next().attr("id");
  $('[href=#'+nextId+']').tab('show');

})

    Démo sur Bootply: http://bootply.com/112163

    Excellente solution - merci!

    OriginalL'auteur Zim

  2. 6

    Viens de trouver ce beaucoup plus élégant solution... 

    $('ul.nav.nav-pills li a').click(function() {           
    $(this).parent().addClass('active').siblings().removeClass('active');           
});

    à partir de: http://info.michael-simons.eu/2012/07/30/twitter-bootstrap-make-the-default-pills-more-usable/

    Excellente solution fantastique!!! Merci.

    OriginalL'auteur Jason Carpenter

  3. 0

    vous pouvez ajouter des Identifiants pour les pilules (step1tab, etc) et ensuite faire une fonction une fonction comme ceci:

    function switchPill(a,b){
    $("#step"+a+"tab").removeClass("active");
    $("#step"+b+"tab").addClass("active");
}

    et les ajouter à la balise d'ancrage du texte:

    onClick="switchPill(2,3)"
    Le Javascript en ligne, Grâce non...
    En la regardant, le violon, il ressemble à la JS fonctionnalité fonctionne comme prévu - le Bootstrap onglet JS est à la recherche spécifiquement pour une <ul><li> marquer comme active et non active: this.activate($this.parent('li'), $ul)

    OriginalL'auteur Snowburnt

  4. -1

    J'ai piraté ce violon: http://jsfiddle.net/MvY4x/7/

    $('div.tab-content a[data-toggle]').on('click', function ()
{
    var that = $(this),
        link = that.attr('href');

    $('a[href="' + link + '"]').not(that).trigger('click');
});

    Vraiment une mauvaise cul hack, les besoins d'amélioration, mais peut donner une idée...

    OriginalL'auteur redaxmedia