Bootstrap nav-tabs with progress bar

Question

I am building a registration system and I have a progress bar and a bootstrap nav-tabs in that page. I am trying to setup the JQuery so that the progress bar advances with the nav-tabs. Here is a visual.

I tried to come up with a simple if else conditional jquery using hasClass and addCLass functions but never got to make a dent.

Something like this:

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

I am attaching a CODEPEN

Any idea on how to do this client side? I'd rather keep C# out of this one

Answer 1

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

in html remove class form all checkout-bar li, except 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 are not specifying which .checkout-bar li to select. You have to get the index of the .active tab and with this index select the checkount li, I think you shoud 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')
  });
});