防止jquery顯示/隱藏div轉到頁面頂部

以下腳本適用於我單擊鏈接並隱藏可能顯示的其他任何其他顯示某個div（以便一次只顯示一個）。但是，點擊鏈接時，腳本也會顯示在頂部。我怎麼能這樣說。防止jquery顯示/隱藏div轉到頁面頂部

代碼：

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
$(document).ready(function(){ 

$('a').click(function() { 
var divname= this.name; 
$("#"+divname).show("slow").siblings().hide("slow"); 
}); 

}); 
</script> 
</head> 
<body> 


<ul> 
<li><a href="#" name="div1" >Show div1</a></li> 
<li><a href="#" name="div2" >Show div2</a></li> 
<li><a href="#" name="div3" >Show div3</a></li> 
<li><a href="#" name="div4" >Show div4</a></li> 
</ul> 

<div> 

<div id="div1" style="display:none"> 
This is div1 
</div> 

<div id="div2" style="display:none"> 
This is div2 
</div> 

<div id="div3" style="display:none"> 
This is div3 
</div> 

<div id="div4" style="display:none"> 
This is div4 
</div> 

</div> 

</body> 
</html>

來源

2011-04-02 Joseph

的原因是在你的HREF中的#。只需使用return false;作爲您的點擊處理程序中的最後一條語句即可防止出現這種情況。

來源

2011-04-02 09:00:43 nfechner

@Joseph：......因爲下面的鏈接是一個鏈接的默認行爲時點擊，這你不取消。要麼做'return false;'或者使用['Event＃preventDefault']（http://api.jquery.com/event.preventDefault/）。 – 2011-04-02 09:03:36

看這裏jQuery event.preventDefault

來源

2011-04-02 09:05:55 AEMLoviji

3210

來源

2011-04-02 09:07:21 Dormouse

同時使用e.preventDefault()和return false;安全

來源

2011-04-02 09:16:30

我還沒有找到一個解決方案，這一點，你必須完全避免虛假的回報，因爲這打破了無障礙。

當您單擊鏈接時，焦點位於目標div上，因此如果您使用鍵盤，則將瀏覽您選擇的div。

使用返回false意味着焦點位於頁面頂部，因此用戶必須每次都在整個頁面上打開標籤，才能到達他們想要的位置。

我會張貼這個作爲對其他答案的答覆，但我看不到任何方式來做到這一點。

來源

2013-09-06 10:52:14 wcndave

使用event.preventDefault();後$('a').click(function()

這將是這樣的：

<script> 
$(document).ready(function(){ 
$('a').click(function() { 
event.preventDefault(); 
var divname= this.name; 
$("#"+divname).show("slow").siblings().hide("slow"); 
}); 
}); 
</script>

來源

2014-08-18 14:00:39 user2787009

防止jquery顯示/隱藏div轉到頁面頂部

回答

相關問題