防止HREF =＃與jQuery跳轉到頂部

Question

對不起..我跑了幾十個問題是這樣，但他們都不似乎幫了我:(

我使用切換腳本，但我每次都！？點擊腳本的鏈接它切換，但它也跳轉到頁面頂部的任何想法這裏是代碼：

<a href="" id="button2">Read More…<a> 
<div id="hidden_content2" style="display:none;"> 
<p>bla bla</p> 
</style> 
</div> 
<script> 
$(document).ready(function() { 
    $("#button2").toggle(
     function() { 
     $(this).text('Hide Content…'); 
     }, 
     function() { 
     $(this).text('Read More…'); 
     } 
    ).click(
     function() { 
     $("#hidden_content2").slideToggle("slow"… 
     } 
    ); 
}); 
</script> 

Answer 1

使用：JavaScript:void(0); in href

<a href="jJavaScript:void(0);" id="button2">Read More…<a> 
<div id="hidden_content2" style="display:none;"> 
<p>bla bla</p> 
</style> 
</div> 
<script> 
$(document).ready(function() { 
$("#button2").toggle(function() { 
$(this).text('Hide Content…'); 
}, function() { 
$(this).text('Read More…'); 
}).click(function(){ 
$("#hidden_content2").slideToggle("slow"… 
}); 
}); 

Answer 2

阻止事件的默認操作注意事項那toggle事件方法已被棄用，您可以使用text方法的回調函數。

$(document).ready(function() { 
    $("#button2").click(function (event) { 
     event.preventDefault(); 
     $(this).text(function (i, text) { 
      return text == 'Hide Content…' ? 'Read More…' : 'Hide Content…' 
     }); 
     $("#hidden_content2").stop().slideToggle("slow"); 
    }); 
}) 

Answer 3

return false從您的點擊處理函數。這可以防止鏈接的默認行爲。

---

你也有一個錯字在點擊處理程序：

$("#hidden_content2").slideToggle("slow"… 

應該是：

$("#hidden_content2").slideToggle("slow"); 

這將打破你的處理程序（包括return false），直到固定。

Answer 4

你可以在你的點擊中使用event.preventDefault（）。

http://api.jquery.com/event.preventDefault/

我認爲點擊方法應該是通過在jQuery的現在更換。

Answer 5

可以使用的preventDefault，例如：

.click(function(e){ 
    e.preventDefault(); 
    $("#hidden_content2").slideToggle("slow"… 
}); 

或者，你可以只使用SPAN或DIV而不是一個錨標記，併爲其分配一個click()的事件，因爲它似乎你實際上並不需要使用錨標籤。

Answer 6

首先，你爲什麼要使用錨鏈接。它不鏈接到任何東西，所以它應該是一個鏈接？你不能只使用普通的div，並將光標設置爲CSS指針？如果你這樣做，你不需要防止點擊空鏈接的默認行爲。

如果你保留鏈接，你有兩個選擇。

$('#button2').toggle(function(event) { 
    event.preventDefault(); 
}); 

或

$('#button2').toggle(function() { 
    return false; 
}); 

Answer 7

使用：
只是一個豆蔻更新在你的代碼

<a href="#" id="button2">Read More…<a> 

<div id="hidden_content2" style="display:none;"> 
    <p>bla bla</p> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 

    $("#button2").toggle(function() { 

     $(this).text('Hide Content…'); 

     }, function() { 

      $(this).text('Read More…'); 

    }).click(function(){ 

     $("#hidden_content2").slideToggle("slow"); 
     return false; 

    }); 

}); 
</script>