我有一个网站使用twitter bootstrap的轮播示例http://twitter.github.io/bootstrap/examples/carousel.html
在旋转木马下面,我使用他们的流体排添加了另一个部分。基本上,在这个新行中我添加了3个div。每个div都有一个嵌入其中的表单。这里有一个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 ...)
但我无法弄清楚的一点是,当我点击Request a Quote按钮时,页面会自动滚动回到顶部。 然后我必须向下滚动到页面才能看到表单。我认为设置焦点在表单中的名称字段会解决它,但它没有什么区别。
旋转木马是否可能造成这种情况?我注意到旋转木马代码包含某个地方的逻辑,以便每隔几秒钟自动更改图片...
任何建议将不胜感激。 感谢。
答案 0 :(得分:2)
这是a
标记的默认行为。为了防止这种情况,您可以在事件中应用.preventDefault
。写下你的函数:
$("#q1btn").click(function(e) {
e.preventDefault();
$('#quote1').toggle();
$('#q1name').get(0).focus();
});
注意函数braket中的e
。
答案 1 :(得分:1)
尝试阻止链接的默认操作。
$("#q1btn").click(function(e) {
e.preventDefault();
$('#quote1').toggle();
$('#q1name').get(0).focus();
});