带有进度条的Bootstrap nav-tabs

Question

我正在构建一个注册系统,我在该页面中有一个进度条和一个bootstrap nav-tabs.我正在尝试设置JQuery,以便使用nav-tabs进度条前进.这是一个视觉.

我尝试使用hasClass和addCLass函数提出一个简单的if else条件jquery,但从来没有弄过.

像这样的东西:

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

我附加了一个CODEPEN

关于如何做这个客户端的任何想法？我宁愿把C#从这个中拿出来

Answer 1

http://jsfiddle.net/o3637uwh/2/(更新)

在html中删除类形式所有checkout-bar li,除了第一个

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(更新)

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

    });
});