preventDefault () на <a> тег
У меня есть некоторый HTML и jQuery, который двигает a div вверх и вниз, чтобы показать или скрыть' его, когда на ссылку нажимают:
<ul class="product-info">
<li>
<a href="#">YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
$(this).next('div').slideToggle(200);
}
Мой вопрос: Как я использую preventDefault() остановить ссылку, действующую как ссылка и добавляющую "#" в конец моего URL и переходящую к верхней части страницы?
Я не могу выяснить правильный синтаксис, я просто продолжаю получать ошибку при высказывании
preventDefault () не является функцией.
3 ответа
Попробуйте что-то как:
$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
event.preventDefault();
$(this).next('div').slideToggle(200);
});
Вот страница об этом в документация jQuery
С другой стороны, Вы могли просто возвратить false от события щелчка:
$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
$(this).next('div').slideToggle(200);
+ return false;
});
, Который остановил бы A-Href быть инициированным.
Примечание однако, по причинам удобства использования, в идеальном мире, что href должен все еще пойти куда-нибудь для людей, кого хочет открыть ссылку на новой вкладке;)
Почему бы просто не сделать это в CSS?
Уберите атрибут 'href' из тега привязки
<ul class="product-info">
<li>
<a>YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
В CSS,
a{
cursor: pointer;
}