1

我有一个使用 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();
  });

一切正常，尽管这可能不是最好的方法。（我打算将表格中的表格更改为divs ...）

但我想不通的一件事是为什么当我单击“请求报价”按钮时页面会自动滚动回顶部。然后我必须向下滚动到页面才能看到表格。我认为将焦点设置在表单中的名称字段上会解决它，但这并没有什么不同。

旋转木马是否可能导致这种情况？我注意到轮播代码在某处包含使图片每隔几秒钟自动更改一次的逻辑...

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

4

2 回答 2

2

这是a标签的默认行为。.preventDefault为了防止它，您可以在事件中应用一些名为的东西。像这样编写你的函数：

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

注意e函数bracket中的。

于 2013-06-11T00:23:34.190 回答
1

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

  $("#q1btn").click(function(e) {
      e.preventDefault();
      $('#quote1').toggle();
      $('#q1name').get(0).focus();
  });
于 2013-06-11T00:23:35.023 回答