防止 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

return false 来自您的点击处理函数。这可以防止链接的默认行为。

---

您的点击处理程序中还有一个错字：

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

应该是：

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

这将破坏您的处理程序（包括return false），直到修复为止。

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

使用：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 4

您可以在点击时使用 event.preventDefault()。

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

我觉得现在jQuery中的click方法应该换成on了。

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>