html
1<!-- エリア1 --> 2<div class="form-area active"> 3フォームの内容 4<button>確認画面</button> <!-- このボタンを押すとエリア2が表示される --> 5</div> 6 7<!-- エリア2 --> 8<div class="form-area"> 9確認画面 10<button>もどる</button><!-- このボタンを押すとエリア1が表示される --> 11<button>送信</button><!-- このボタンを押すとエリア3が表示される --> 12</div> 13 14<!-- エリア3 --> 15<div class="form-area"> 16送信完了 17<button>フォーム入力に戻る</button><!-- このボタンを押すとエリア1が表示される --> 18</div>
js
1$('button').click(function(){ 2 $(this).toggleClass('active'); 3});
やりたいことは
最初の画面では1つ目のフォームの内容の.form-areaが表示されていて
buttonを押したら次の確認画面.form-areaを表示、戻るを押したらフォームの内容の.form-areaが表示
送信完了の画面でbuttonをおしたら最初のフォームの内容.form-areaを表示
のようにクラス(active)を追加したり削除したりしたいのですが、上記のjsだと同時に2つform-areaが
出てしまうとおもうのですがよい方法はないでしょうか?jsはほとんど初めて触るため知識がありません。
ご教示よろしくお願いいたします。
回答3件
あなたの回答
tips
プレビュー