在jQuery事件之后停止onClick返回页面顶部答案

【问题标题】：Stopping onClick from returning the page top the top after jQuery events在jQuery事件之后停止onClick返回页面顶部
【发布时间】：2011-07-24 13:08:37
【问题描述】：

我在这里阅读了很多关于这个问题的帖子，有很好的解决方案，但是，它们似乎都不适用于我的情况。

这是我的 JS：

$(document).ready(function(){
    $("a.tab").click(function () {
        $(".active").removeClass("active");
        $(this).addClass("active");
        $(".inside ul").fadeOut();
        $(".inside ul").fadeIn();
        var content_show = $(this).attr("title");
        return false;
        e.preventDefault();
    });
    $("a.tab, h4").FontEffect({
        outline: true
    })
});

我做错了什么？

更新：

感谢您的帮助。现在我有以下内容，但它仍然无法正常工作：

$(document).ready(function(){
        $("a.tab").click(function(e) {
            e.preventDefault();
            $(".active").removeClass("active");
            $(this).addClass("active");
            $(".inside ul").fadeOut();
            $(".inside ul").fadeIn();
            var content_show = $(this).attr("title");
            return false;
        });
        //$("a.tab, h4").FontEffect({
        //  outline: true
    //  })
    });

锚标签：

<a href="#" title="content_1" class="tab active">New Videos</a>

VIEWABLE

【问题讨论】：

@SSHUC 不要在评论中发布代码（长代码），通过更新编辑您的原始 Q。或者如果您找到了正确答案，请将其标记为如此
点击链接后页面继续返回顶部。
锚标签是什么样的？
@SSHUC: 你确定你的事件处理程序被触发了...... addClass 和淡出是否像它应该的那样发生？
@prodigitalson 是的，一切都很好，但一旦发生，页面就会返回顶部

标签： jquery onclick return

【解决方案1】：

试试：

 $("a.tab").click(function (e) {

在代码中您缺少event argument variable，在这种情况下为e。

如果您使用 preventDefault() 方法，则无需使用 return false。

在线演示： http://jsfiddle.net/dcFT7/

更新

滚动跳转不是点击链接引起的，是隐藏ul时$(".inside ul").fadeOut()页面高度变小导致浏览器滚动到顶部引起的。

我可以通过使用.animate({ opacity: 0 }, 500) 来解决这个问题，在不隐藏的情况下执行淡出效果。

$("a.tab").click(function (e) {
    ...
    $(".inside ul").animate({opacity:0},500);
    $(".inside ul").fadeIn();
    ...
    e.preventDefault();
});

【讨论】：

你不需要包含事件变量，我不相信有一个点击
@neal 是我的客人，试试这个演示从“function(e){”中取出“e”，看看它是否有效：jsfiddle.net/dcFT7 你必须在函数参数。
@amosrivera，可能很好。但我认为这也与在 rong 空间被阻止的默认值有关
@neal：如果您想访问事件对象（即e.preventDefault），您可以这样做。但是，正如您在回答中所说的那样......该电话也需要首先或至少在 return false 声明之前。所以你们都有部分答案:-)
修复了我的答案以包括(e)

【解决方案2】：

问题是你在阻止默认操作（e.preventDefault();）之前返回，试试这个：

    $("a.tab").click(function (e) {
        e.preventDefault();
        $(".active").removeClass("active");
        $(this).addClass("active");
        $(".inside ul").fadeOut();
        $(".inside ul").fadeIn();
        var content_show = $(this).attr("title");
        return false;
    });

并且在锚标签上确保 href 的格式为：

href='javascript:void(0);'

【讨论】：

$(document).ready(function(){ $("a.tab").click(function(e) { e.preventDefault(); $(".active").removeClass ("active"); $(this).addClass("active"); $(".inside ul").fadeOut(); $(".inside ul").fadeIn(); var content_show = $(this ).attr("title"); return false; }); //$("a.tab, h4").FontEffect({ // outline: true // }) });
@SSHUC，请参阅我对您问题的评论。

【解决方案3】：

可能就像“e.preventDefault();”一样简单走错线了？

$(document).ready(function(){
        $("a.tab").click(function () {
            e.preventDefault();
            $(".active").removeClass("active");
            $(this).addClass("active");
            $(".inside ul").fadeOut();
            $(".inside ul").fadeIn();
            var content_show = $(this).attr("title");
            return false;

        });
        $("a.tab, h4").FontEffect({
            outline: true
        })
    });

【讨论】：