带有进度条的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");

    });
});

Answer 2

您没有指定要选择的.checkout-bar li。您必须获取.active标签的索引，并使用此索引选择checkount li，我认为您应该执行以下操作：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;