0

4 つのステップを持つ単純な HTML フォームがあります。次のボタンをクリックすると、コンテンツが水平にスライドして次のステップが表示されるように、一度に 1 つのステップを表示したいと思います。

同様の例を見つけることができた唯一の場所は、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 に答える