0

我有一个简单的 HTML 表单，有 4 个步骤。我想一次显示一个步骤，带有一个下一步按钮，单击该按钮时会水平滑动内容以显示下一步。

我唯一能找到类似示例的地方是http://www.maritalaffair.co.uk/ <- 现在加入免费框。

我有基本的 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/

4

2 回答 2

2

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

这里：http: //jsfiddle.net/sAwam/6/

我分配给你的 div css " display: none;" 的基础，并且事件我归属他一个类 " active" 来出现或不被选择的步骤。

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

于 2013-09-04T15:39:40.780 回答
1

工作演示

试试这个

代码

  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;
}
于 2013-09-04T17:53:01.347 回答