Bootstrap progress bar navigation tabs

Question

I am creating a registration system and there is a progress bar and bootstrap boot tabs on this page. I am trying to customize jQuery so that the progress bar progresses with navigation tabs. Here is a visual one.

I tried to come up with a simple if else conditional jquery using the hasClass and addCLass functions, but could not make a dent.

Something like that:

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

I attach CODEPEN

Any idea on how to make this client side? I would rather leave C # from this

Answer 1

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

in html remove the class from all checkout-bar li except the first

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

 $(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

You do not specify which .checkout-bar li to choose. You should get the index of the .active tab, and with that index select checkount li , I think you will do something like this:

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