带进度条的引导导航选项卡答案

【问题标题】：Bootstrap nav-tabs with progress bar带进度条的引导导航选项卡
【发布时间】：2015-01-27 13:12:24
【问题描述】：

我正在构建一个注册系统，并且该页面中有一个进度条和一个引导导航选项卡。我正在尝试设置 JQuery，以便进度条与导航选项卡一起前进。这是一个视觉效果。

我尝试使用 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# 排除在外

【问题讨论】：

标签： javascript jquery css twitter-bootstrap-3

【解决方案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");

    });
});

【讨论】：

太棒了！谢谢！我所要做的就是弄清楚如何重置效果，如果用户从第 2 步回溯到第 1 步，等等。除非，你有那个修复，然后我会给你买啤酒哈哈

【解决方案2】：

您没有指定选择哪个.checkout-bar li。您必须获取.active 选项卡的索引，并使用此索引选择checkount li，我认为您应该这样做：

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

【讨论】：