Question

我正在使用此代码隐藏并在链接标记下显示我的图像。我把这个HTML代码放在我的网站中间。

我的问题是每当我点击链接标签时，我的网站从中间跳到顶部。因此，观众无法看到滑动效果，他们必须再次向下滚动才能回到中间位置。

如何防止它跳到顶端？我在wordpress中使用它。

HTML：

<a class = "showul" href="#"> 24 hour front desk</a>
<img class = "hideul" src="http://localhost.com/wp-content/uploads/2013/12/recption-300x200.jpg" />

<a class="showul" href="#">Restaurant</a>
<img class="hideul" src="http://localhost.com/wp-content/uploads/2013/12/rest-300x200.jpg" alt="" />

<a class="showul" href="#"> Conference</a>
<img class="hideul" src="http://localhost.com/wp-content/uploads/2013/12/conference-300x200.jpg" alt="" />

JavaScript的：

jQuery(document).ready(function($) {
    $(".showul").click(function() {
        var $hideUl = $(this).siblings(".hideul");
        var show = !$hideUl.is(':visible');

        $('.hideul').slideUp('slow');
        if (show)
            $hideUl.slideToggle('slow');
    });
});

Answer 1

将href="#"的所有实例替换为href="javascript:void(0)"，以解决问题

Answer 2

您需要停止点击传播：

jQuery(document).ready(function($) {
$(".showul").click(function(e) {
    e.preventDefault();
    var $hideUl = $(this).siblings(".hideul");
    var show = !$hideUl.is(':visible');
    $('.hideul').slideUp('slow');
    if (show)
        $hideUl.slideToggle('slow');
});
});

来源：preventDefault()

Answer 3

您的点击处理程序不会阻止点击链接的默认操作。

#some-id形式的href会将页面跳转到具有该id的元素的位置。如果id不存在，或者被省略（只是#），那么它将跳转到页面顶部。

在jQuery中，实现此目的的最简单方法是从单击处理程序返回false以防止发生默认操作。

$(".showul").click(function() {
    // ...
    return false;
});

另一种方法是在事件对象上调用preventDefault

$(".showul").click(function(e) {
    e.preventDefault();
    // ...
});

Answer 4

首选选项是将evt添加到click(function(evt) ...并在点击回调中使用evt.preventDefault()。

Answer 5

您必须使用preventDefault函数来阻止href的默认操作

 jQuery(document).ready(function($) {
    $(".showul").click(function(e) {
        e.preventDefault();
        var $hideUl = $(this).siblings(".hideul");
        var show = !$hideUl.is(':visible');
        $('.hideul').slideUp('slow');
        if (show)
            $hideUl.slideToggle('slow');
    });
    });

使用jQuery后，网页异常跳转

5 个答案: