JavaScriptまたはjQueryでこれを行うことができます...
HTML
ページネーションで新しい (コピー/貼り付け可能な) リンクを作成する必要がない場合、複数ページのフォームを作成する私のお気に入りの方法の 1 つは、次のように JavaScript を呼び出してセクションを表示および非表示にするページネーション コントロールを使用することです。
<div id='section1' class='section'> ... BUNCH OF RADIOS ... </div>
<div id='section2' class='section'> ... BUNCH OF RADIOS ... </div>
<div id='links' style='display:none;'>
<a href='javascript:void(0);' class='show' data-section='1'>1</a> |
<a href='javascript:void(0);' class='show' data-section='2'>2</a>
</div>
JavaScript
次に、いくつかの JavaScript 関数を作成します (jQuery がインストールされていると仮定します。インストールされていない場合は、純粋な Javascript でこれを行うことができますが、それほどきれいではありません)。
function hideAllSections() {
$('.section').hide(0);
}
function showSection(section) {
$('#section' + section).show(0);
}
$('.show').click(function(){
showSection($(this).data('section'));
});
最後に、ドキュメントが読み込まれるとすぐに最初のセクションを除くすべてのセクションを非表示にするには:
$(function(){
hideAllSections();
showSection(1);
$('#links').show(0);
});
なぜこのようにするのですか?
私がこの方法を気に入っている理由はいくつかあります。
- プログレッシブエンハンスメントです。ユーザーが JavaScript を持っていない場合、フォームはすべて 1 ページに表示されます。
- すべての入力は技術的には 1 つの HTML ページにあるため、送信機能を 1 つだけ実行する必要があります。jQuery のページネーションにより、入力は別々のページに表示されるだけです。
私が考えることができる唯一の短所は、ユーザーが一度にそれを完了する必要があるということです.