Question

我有一个简单的HTML表单，有4个步骤。我希望一次显示一个步骤，使用下一个按钮，单击此按钮将水平滑动内容以显示下一步。

我唯一可以找到类似示例的地方是http://www.maritalaffair.co.uk/＆lt; - 免费加入免费框的主页。

我有基本的HTML设置，我只是不确定如何最好地实现jQuery

<form action="#" method="post">
    <div id="fstep_1">
        <p>THIS IS STEP 1</p>
    </div>
    <div id="fstep_2">
        <p>THIS IS STEP 2</p>
    </div>
    <div id="fstep_3">
        <p>This is STEP 3</p>
    </div>
    <div id="fstep_4">
        <p>THIS IS STEP 4</p>
        <input type="submit" value="submit" />
    </div>

    <a href="#">Next</a>
</form>

<div class="steps">
    <span class="fstep_1">1</span>
    <span class="fstep_2">2</span>
    <span class="fstep_3">3</span>
    <span class="fstep_4">4</span>
</div>

http://jsfiddle.net/sAwam/

Answer 1

在表单的步骤中，最好使用制表符系统进行更清晰的集成。

此处：http://jsfiddle.net/sAwam/6/

我在基地分配给您的div css“display: none;”，并且我将其归为“active”类，以显示或不显示所选步骤。

使用jQuery，我们得出了这个结果。

Answer 2

正在使用 DEMO

试试这个

码

  var viewed;
$('.steps a').click(function () {
    viewed = $('.selected');
    if (viewed.attr('id') != 'fstep_4') {
        $('.' + viewed.attr('id')).css('color', 'black');
        viewed.removeClass('selected').animate({
            left: '150%',
        }, 400);
        viewed.next().addClass('selected').animate({
            left: '50%',
        }, 400);
        $('.' + viewed.next().attr('id')).css('color', 'red');
    }

});
$('.steps span').click(function () {

    viewed = $('.selected');
   if (viewed.attr('id').toString() != $(this).attr('class').toString()) {
        $('.' + viewed.attr('id')).css('color', 'black');
        viewed.removeClass('selected').animate({
            left: '150%'
        }, 400);
        $("#" + $(this).attr('class')).addClass('selected').animate({
            left: '50%'
        }, 400);
        $(this).css('color', 'red');
    }
});

HTML

<div class="container">
    <form action="#" method="post">
        <div id="fstep_1" class="box box1 selected">
            <p>THIS IS STEP 1</p>
        </div>
        <div id="fstep_2" class="box box2">
            <p>THIS IS STEP 2</p>
        </div>
        <div id="fstep_3" class=" box box3">
            <p>This is STEP 3</p>
        </div>
        <div id="fstep_4" class="box box4">
            <p>THIS IS STEP 4</p>
            <input type="submit" value="submit" />
        </div>
    </form>
    <div class="steps"> <a href="#">Next</a>
 <span class="fstep_1">1</span>
 <span class="fstep_2">2</span>
 <span class="fstep_3">3</span>
 <span class="fstep_4">4</span>

    </div>
</div>

CSS

body {
    padding: 0px;
}
.container {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 200px;
    height: 200px;
    left: 40%;
    overflow: hidden;
    cursor: pointer;
}
.container .box {
    position: absolute;
    width: 98%;
    height: 100px;
    text-align: center;
    left: 200%;
    top: 10px;
    margin-left: -50%;
    background: white;
}
#fstep_1 {
    left: 50%;
}
.steps {
    position:fixed;
    top: 150px;
}
.fstep_1 {
    color:red;
}

水平滑动内容

2 个答案:

码

HTML

CSS