ここにあるTwitterブートストラップのカルーセルの例を使用しているサイトがありますhttp://twitter.github.io/bootstrap/examples/carousel.html
カルーセルの下に、流動的な行を使用して別のセクションを追加しました。基本的に、この新しい行に 3 つの div を追加しました。各 div にはフォームが埋め込まれています。例として 1 つの div を次に示します。
<div class="row-fluid">
<div class="span4 package">
<h2>Package 1</h2>
<p>A basic package that ....includes blah blah blah </p>
<ul>
<li>a</li>
<li>br</li>
<li>c</li>
<li>d</li>
</ul>
</p><br/>
<p><a class="btn btn-info" href="#" id="q1btn">Request a Quote »</a></p><br/>
<div id="quote1">
<form action="quote.php" method="post">
<table width="400" border="0" cellspacing="2" cellpadding="0">
<tr>
<td width="29%" class="bodytext">Name:</td>
<td width="71%"><input name="name" type="text" id="q1name" size="32" autofocus></td>
</tr>
<tr>
<td class="bodytext">eMail:</td>
<td><input name="email" type="text" id="email" size="32"></td>
</tr>
<tr>
<td class="bodytext">Message:</td>
<td><textarea name="comment" cols="45" rows="6" id="comment" class="bodytext"></textarea></td>
</tr>
<tr>
<td class="bodytext"> </td>
<td align="left" valign="top"><input type="submit" name="Submit" value="Send"></td>
</tr>
</table>
</form>
</div>
</div>
私はjqueryを使用して、このフォームの可視性を切り替えています...次のように:
$(document).ready(function() {
$('#quote1').hide();
});
$("#q1btn").click(function() {
$('#quote1').toggle();
$('#q1name').get(0).focus();
});
これは最善の方法ではないかもしれませんが、すべてうまくいきます。(フォーム内のテーブルをdivに変更する予定です...)
しかし、私が理解できないことの 1 つは、[Request a Quote] ボタンをクリックすると、ページが自動的に一番上に戻る理由です。フォームを表示するには、スクロールしてページに戻る必要があります。フォームの名前フィールドにフォーカスを設定すると解決すると思いましたが、違いはありません。
カルーセルがこれを引き起こしている可能性はありますか?カルーセルコードには、数秒ごとに画像を自動的に変更するロジックがどこかに含まれていることに気付きました...
任意の提案をいただければ幸いです。ありがとう。