[英]Bootstrap nav-tabs with progress bar
I am building a registration system and I have a progress bar and a bootstrap nav-tabs in that page. 我正在建立一个注册系统,并且在该页面中有一个进度栏和一个引导nav标签。 I am trying to setup the JQuery so that the progress bar advances with the nav-tabs.
我正在尝试设置JQuery,以便进度条与nav-tabs一起前进。 Here is a visual.
这是视觉效果。
I tried to come up with a simple if else conditional jquery using hasClass and addCLass functions but never got to make a dent. 我试图使用hasClass和addCLass函数提出一个简单的条件jQuery,但从来没有做过。
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#排除在外
http://jsfiddle.net/o3637uwh/2/ (update) http://jsfiddle.net/o3637uwh/2/ (更新)
in html remove class form all checkout-bar li, except first 在html中删除类形式的所有checkout-bar li,除了first
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");
});
});
You are not specifying which .checkout-bar li
to select. 您没有指定要选择的
.checkout-bar li
。 You have to get the index of the .active
tab and with this index select the checkount li
, I think you shoud do something like this: 您必须获取
.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') }); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.