Nav-tab bootstrap con barra di avanzamento

Question

Sto costruendo un sistema di registrazione e ho una barra di avanzamento e una scheda di navigazione bootstrap in quella pagina. Sto provando ad installare JQuery in modo che la barra di avanzamento avanzi con le schede di navigazione. Ecco un visual.

ho cercato di venire con un semplice if else jquery condizionale mediante funzioni hasClass e addClass ma mai avuto modo di fare un'ammaccatura.

Qualcosa di simile a questo:

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

Vi allego un CODEPEN

Qualche idea su come fare questo lato client? Preferisco tenere C# fuori da questo

Answer 1

http://jsfiddle.net/o3637uwh/2/ (aggiornamento)

in html rimuovere il modulo di classe tutti i checkout-bar li, tranne il primo

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 (aggiornamento)

$(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"); 

    }); 
}); 

Answer 2

Non state specificando quale .checkout-bar li selezionare. Dovete ottenere l'indice della scheda .active e con questo indice selezionare il checkount li, penso che si shoud fare qualcosa di simile:

$(document).ready(function() { 
 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
 
    activeTabIndex = $('.nav.nav-tabs > li.active ').index(); 
 
    (".checkout-bar li.active").removeClass('active'); 
 
    $(".checkout-bar li:eq("+activeTabIndex+")").addClass('active') 
 
    }); 
 
});