带有进度栏的引导导航选项卡

莲花

我正在建立一个注册系统，并且在该页面中有一个进度栏和一个引导nav标签。我正在尝试设置JQuery，以便进度条与nav-tabs一起前进。这是视觉效果。

在此处输入图片说明

我试图使用hasClass和addCLass函数提出一个简单的条件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＃排除在此范围之外

dm4web

http://jsfiddle.net/o3637uwh/2/（更新）

在html中删除类形式的所有checkout-bar li，除了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（更新）

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

    });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。