我有一个基本上是多阶段的形式,见下图
我想要做的是顶部为绿色的步骤,这些步骤应该变成按钮点击,我可以跳到该步骤。
现在我只能回头往前走。我无法跳过步骤
这是JSFIDDLE
HTML
<div class="progress1">
<ul class="cf checkout-tabs breadcrumb" style="list-style:none"><span class="done1 talign-center stage-login">1</span>
<li class="active1 talign-center stage-login">2</li>
<li class="disabled talign-center stage-delivery">3</li>
<li class="disabled talign-center stage-delivery">4</li>
<li class="disabled talign-center stage-payment">5</li>
</ul>
</div>
谢谢&amp;问候
答案 0 :(得分:2)
工作示例:http://jsfiddle.net/Gajotres/ZzCA2/58/
添加了代码:
$(".ui-content").on("click", ".checkout-tabs li",function (e) {
var selectedTab = $(this);
$(".checkout-tabs li").each(function(index) {
if(index <= selectedTab.index()) {
$(this).addClass('active1');
if(index < selectedTab.index()) {
$(this).addClass('done1');
} else {
$(this).removeClass('done1');
}
} else if(index > selectedTab.index()) {
$(this).removeClass('active1 done1');
}
});
$(".step").each(function() {
$(this).removeClass('active').addClass("ui-screen-hidden");
});
$(".step:eq(" + selectedTab.index() + ")").removeClass('ui-screen-hidden').addClass("active");
});
您应该添加代码,以防止跳转到尚未启用的标签。我希望这就是你所需要的。