< a>上的preventDefault（）标签 [英] preventDefault() on an <a> tag

问题描述

我有一些html / jquery在点击一个链接时向上和向下滑动div以显示/隐藏它：

 < ul class =product-info> 
< li> 
< a href =＃>你点击它来显示/隐藏< / a> 
< div class =toggle> 
< p>要显示/隐藏的内容< / p> 
< / div> 
< / li> 
< / ul> 
  

  $（'div。肘节'）隐藏（）; 
 $（'ul.product-info li a'）。click（function（event）{
 $（this）.next（'div'）。slideToggle（200）; 
} 
  

我的问题是：我如何使用 preventDefault（）停止链接作为链接并将＃添加到我的网址末尾并跳转到页面顶部？

我无法弄清楚正确的语法，我只是不断收到一个错误，说preventDefault（）不是函数。

尝试类似：

  $（'div.toggle'）。hide（）; 
 $（'ul.product-info li a'）。click（function（event）{
 event.preventDefault（）; 
 $（this）.next（'div'）。 slideToggle（200）; 
}）; 
  

这是关于< a href =http://learn.jquery.com/events/event-basics/#preventdefault\"rel =noreferrer> jQuery文档

I have some html/jquery that slides a div up and down to show/hide it, when a link is clicked:

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

My question is: How do I use preventDefault() to stop the link acting as a link and adding # to the end of my URL & jumping to the top of the page?

I can't figure out the right syntax, I just keep getting an error saying that preventDefault() is not a function.

解决方案

Try something like:

$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
    event.preventDefault();
    $(this).next('div').slideToggle(200);
});

Here is the page about that in the jQuery documentation

这篇关于&lt; a&gt;上的preventDefault（）标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！