Question

我有一个网站使用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 &raquo;</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按钮时，页面会自动滚动回到顶部。然后我必须向下滚动到页面才能看到表单。我认为设置焦点在表单中的名称字段会解决它，但它没有什么区别。

旋转木马是否可能造成这种情况？我注意到旋转木马代码包含某个地方的逻辑，以便每隔几秒钟自动更改图片...

任何建议将不胜感激。感谢。

Answer 1

这是a标记的默认行为。为了防止这种情况，您可以在事件中应用.preventDefault。写下你的函数：

$("#q1btn").click(function(e) {
    e.preventDefault();
    $('#quote1').toggle();
    $('#q1name').get(0).focus();
});

注意函数braket中的e。

Answer 2

尝试阻止链接的默认操作。

  $("#q1btn").click(function(e) {
      e.preventDefault();
      $('#quote1').toggle();
      $('#q1name').get(0).focus();
  });

单击按钮时如何防止页面向上滚动

2 个答案: