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中用on替换click方法。

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>

使用jquery跳转到顶部防止href =＃

7 个答案: