Bootstrap nav-tabs avec barre de progression

Je suis la construction d'un système d'enregistrement et j'ai une barre de progression et un bootstrap nav-tabs dans cette page.
J'essaye de configurer le JQuery, de sorte que la barre de progression avance avec le nav-tabs. Voici un visuel.

Bootstrap nav-tabs avec barre de progression

J'ai essayé de venir avec un simple if else conditionnelle à l'aide de jquery hasClass et addCLass fonctions mais n'a jamais eu à faire une brèche.

Quelque chose comme ceci:

$(document).ready(function () {
   $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
     if (".nav-tabs") hasClass(".active"); {
       $(".checkout-bar li").addClass("active");
     }
   });
});

Je joins une CODEPEN

Aucune idée sur comment le faire côté client? Je préfère le garder C# en dehors de celui-ci

OriginalL'auteur LOTUSMS | 2014-11-28

  1. 7

    http://jsfiddle.net/o3637uwh/2/ (mise à jour)

    en html suppression de la classe forme tous checkout-bar li, à l'exception des premier

    HTML

    <ul class="checkout-bar">
  <li class="active"><a href="#get-started" data-toggle="tab">Get Started</a></li>
  <li class=""><a href="#about-you" data-toggle="tab">About You</a></li>
  <li class=""><a href="#looking-for" data-toggle="tab">Looking For</a></li>
  <li class=""><a href="#">Review</a></li>
</ul>

    JQ (mise à jour)

    $(document).ready(function () {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

        var href = $(e.target).attr('href');
        var $curr = $(".checkout-bar  a[href='" + href + "']").parent();

        $('.checkout-bar li').removeClass();

        $curr.addClass("active");
        $curr.prevAll().addClass("visited");

    });
});
    Excellent! Merci!!!! Tout ce que j'ai à faire est de comprendre comment réinitialiser le effet, si l'utilisateur fait marche arrière à l'étape 1 à partir de l'étape 2, etc. À moins que, vous avez ce correctif, Puis je vais vous acheter une bière lol
    - je mettre à jour JQ et jsfiddle lien
    Vous êtes apprécié!

    OriginalL'auteur dm4web