divリンクをクリックしたときに上下にスライドして表示または非表示にする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>hrefアンカータグ（a）の@KLVTZ 属性が空ではない可能性があります...しかし、これをに設定できjavascript:<code-here>ます。これは正当/有効です。次に<code-here>、セミコロンを追加して、空のステートメントだけを入力します。このようにリンクは何もしません。
return false結果として次の3つのことが発生するため、を使用しないことをお勧めします。
したがって、このタイプの状況では、実際には event.preventDefault();
または、クリックイベントから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>使用する
javascript：void（0）;
href="javascript:// Send Email"
まだ使ってJavaScriptでこれを実行する別の方法inline onclick、IIFE、eventとpreventDefault()：
<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a><a href='#' onclick="event.preventDefault()">Click Me</a>
いくつかの操作の後、ページが最終的にリンクに移動する必要がある場合、以下を実行できます。
jQuery("a").click(function(e){
var self = jQuery(this);
var href = self.attr('href');
e.preventDefault();
// needed operations
window.location = href;
});preventDefault、デフォルトのアクションを自分で行うのですか？追加する必要があることを実行するだけで、デフォルトが実行されます。
なぜ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;
}return false;イベントの伝達を停止するためにイベント呼び出しから利用でき、それはevent.preventDefault();それを否定するように動作します。またはjavascript:void(0)、href属性を使用して、指定された式を評価してundefinedから要素に戻ることができます。
呼び出されたときにイベントを返す：
<a href="" onclick="return false;"> ... </a>ボイドケース：
<a href="javascript:void(0);"> ... </a>詳しくは、アンカータグのクリックイベントリスナーにhrefと 'return false'にvoid（0）を追加した場合の影響をご覧ください。