0

这就是我所拥有的，并且有效。我想知道是否有更多经验的人可以阐明如何用更少的代码行来做到这一点。

    $(function(){
    $("#div2, #div3, #div4, #div5, #div6, #back").hide();
    $("#next").on("click", function(){
    if($("#div1").is(":visible")){
        $("#back").show();
        $("#div2").show();
        $("#div1").hide();
    }
    else if($("#div2").is(":visible")){
        $("#div3").show();
        $("#div2").hide();
    }
    else if($("#div3").is(":visible")){
        $("#div4").show();
        $("#div3").hide();
    }
    else if($("#div4").is(":visible")){
        $("#div5").show();
        $("#div4").hide();
    }
    else if($("#div5").is(":visible")){
        $("#div6").show();
        $("#div5").hide();
    }
    });
    });
4

3 回答 3

1

试试这个：http: //jsfiddle.net/DomDay/vy5U4/6

<div class="div-stepper">
    <div>div 1</div>
    <div>div 2</div>

    ... arbitrary number of divs ...

    <div>div n-1</div>
    <div>div n</div>
</div>

<div class="controls">
    <div id="back">back</div>
    <div id="next">next</div>
</div>

js

resetStepper()

$('#next').on( 'click', function() {
    $active = $('.div-stepper .active:not(:last-child)');
    $active.removeClass('active').next().addClass('active');
    $('#back').show();    
});

$('#back').on( 'click', resetStepper );

function resetStepper() {
    $('.div-stepper div').removeClass('active');
    $('.div-stepper div:first-child').addClass('active');
    $('#back').hide();    
}

这不依赖于 div id，但为方便起见，使用带有类的包装器 div。

（编辑。忘记了“返回”按钮）

（编辑。包括“返回”/“下一步”按钮单击功能：http: //jsfiddle.net/DomDay/vy5U4/6/）

于 2013-07-11T22:59:26.447 回答
1

一个想法：

$(function(){
    $("#div2, #div3, #div4, #div5, #div6, #back").hide();

    $("#btnNext").on("click", function(){
       var checked = false;
        $("div").each(function(){
            if ($(this).is(":visible"))
            {
                if (!checked)
                {
                    $(this).next().show();
                    $(this).hide();
                    checked = true;
                }
            }
        });
    });
});

http://jsfiddle.net/QYMEb/

于 2013-07-11T23:01:46.993 回答
0

这应该有效：

<div id="back">back</div>
<div>
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
<div id="div4">div 4</div>
<div id="div5">div 5</div>
<div id="div6">div 6</div>
</div>
<div id="next">next</div>

$(function(){
    $("#div2, #div3, #div4, #div5, #div6, #back").hide();
    $("#next").on("click", function(){
        $("[id^=div]:visible").hide().next().show();
        $("#back").show();
        if($("[id^=div]:visible").index() === $("[id^=div]").length-1) { $("#next").hide(); }
    });
    $("#back").on("click", function(){
        $("[id^=div]:visible").hide().prev().show();
        $("#next").show();
        if($("[id^=div]:visible").index() === 0) { $("#back").hide(); }
    });    
 });

这是小提琴

于 2013-07-11T23:28:17.570 回答