如何保存已填充的表单的一部分并使用标题中的步骤编号在JQM中导航

时间:2014-06-12 10:02:14

标签: javascript jquery jquery-mobile

我有一个基本上是多阶段的形式,见下图

enter image description here

我想要做的是顶部为绿色的步骤,这些步骤应该变成按钮点击,我可以跳到该步骤。

现在我只能回头往前走。我无法跳过步骤

这是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;问候

1 个答案:

答案 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");
}); 

您应该添加代码,以防止跳转到尚未启用的标签。我希望这就是你所需要的。