div
링크를 클릭 할 때 위아래로 슬라이드하여 HTML 을 표시하거나 숨기는 HTML 및 jQuery가 있습니다 .
<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 ()는 함수가 아닙니다.
답변
다음과 같은 것을 시도하십시오 :
$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
event.preventDefault();
$(this).next('div').slideToggle(200);
});
다음은 jQuery 설명서 의 페이지입니다.
답변
href
속성을 다음과 같이 설정하십시오href="javascript:;"
<ul class="product-info">
<li>
<a href="javascript:;">YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
답변
return false
3 가지 결과가 발생하므로을 사용하지 않는 것이 좋습니다 .
- event.preventDefault ();
- event.stopPropagation ();
- 콜백 실행을 중지하고 호출되면 즉시 반환합니다.
따라서 이런 상황에서는 실제로 만 사용해야합니다 event.preventDefault();
기사 보관 -jQuery 이벤트 : Return False를 사용하여 Stop (Mis)
답변
또는 click 이벤트에서 false를 반환 할 수도 있습니다.
$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
$(this).next('div').slideToggle(200);
+ return false;
});
A-Href가 트리거되는 것을 막을 수 있습니다.
그러나 사용상의 이유로 인해 새로운 세상에서 링크를 열려고하는 사람들에게는 href가 여전히 어딘가에 가야하는 이상적인 세계에서;)
답변
이것은 방금 테스트 한 비 JQuery 솔루션이며 작동합니다.
<html lang="en">
<head>
<script type="text/javascript">
addEventListener("load",function(){
var links= document.getElementsByTagName("a");
for (var i=0;i<links.length;i++){
links[i].addEventListener("click",function(e){
alert("NOPE!, I won't take you there haha");
//prevent event action
e.preventDefault();
})
}
});
</script>
</head>
<body>
<div>
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.facebook.com">Facebook</a></li>
<p id="p1">Paragraph</p>
</ul>
</div>
<p>By Jefrey Bulla</p>
</body>
</html>
답변
<ul class="product-info">
<li>
<a href="javascript:void(0);">YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
사용하다
자바 스크립트 : void (0);
답변
그러나 사용하여 자바 스크립트에서이 일을하는 또 다른 방법 inline onclick
, IIFE
, event
과 preventDefault()
:
<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>