javascript 带进度条的 Bootstrap 导航标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27196066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap nav-tabs with progress bar
提问by LOTUSMS
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.
我正在构建一个注册系统，并且该页面中有一个进度条和一个引导程序导航选项卡。我正在尝试设置 JQuery，以便进度条随着导航标签前进。这是一个视觉效果。
I tried to come up with a simple if else conditional jquery using hasClass and addCLass functions but never got to make a dent.
我试图想出一个简单的 if else 条件 jquery 使用 hasClass 和 addCLass 函数，但从来没有做任何事情。
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
我正在附上一个CODEPEN
Any idea on how to do this client side? I'd rather keep C# out of this one
关于如何做这个客户端的任何想法？我宁愿让 C# 远离这个
回答by dm4web
http://jsfiddle.net/o3637uwh/2/(update)
http://jsfiddle.net/o3637uwh/2/（更新）
in html remove class form all checkout-bar li, except first
在 html 中删除类表单所有结帐栏 li，除了第一个
HTML
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)
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");
});
});
回答by Sn0opr
You are not specifying which .checkout-bar lito select. You have to get the index of the .activetab and with this index select the checkount li, I think you shoud do something like this:
您没有指定.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')
});
});