как предотвратить страницу от прокрутки назад, когда кнопка нажата

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(); 
    }); 

Все работает, Eventhough это может быть не лучшим способом сделать это. (Я планирую изменить таблицу в форме на divs ...)

Но я не могу понять, почему страница автоматически прокручивается назад, когда я нажимаю на запрос запроса кнопка. Затем я должен прокрутить страницу вниз, чтобы увидеть форму. Я думал, что фокусировка на поле имени в форме разрешит его, но это не имеет значения.

Возможно ли, что карусель вызывает это? Я заметил, что код карусели включает в себя логику где-то, чтобы сделать снимки меняющимися автоматически каждые несколько секунд ...

Любые предложения были бы оценены. Спасибо.

Answer 1

Это поведение по умолчанию тега a. чтобы предотвратить это, есть что-то, называемое .preventDefault, которое вы можете применить к событию. Напишите функцию, как это:

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

Обратите внимание на e в функции Braket.

Answer 2

Попробуйте предотвратить действие по умолчанию ссылки.

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