Question

我有一个jQuery脚本，在其父容器中的容器之间淡入和淡出。根据单击的按钮（设计，网页），它会确定哪个容器（#design，#web）淡出，哪个容器在其位置淡入。

现在，症结在这里，这两个容器（#design，#web）的高度不同，所以当我淡出并淡入这些容器之间时，页面会跳到特定的位置在fadeIn()函数调用完成后直接执行。如果没有容器（#design，#web）在父容器内可见，那么（x，y）的位置与页面所处的位置完全相同（即一个空容器），页面一直滚动到底部。

之前还有其他人遇到过这个吗？非常感谢任何建议，因为这个问题无休止地困扰着我。

PS。我已经在Firefox和Safari中对此进行了测试，两者都显示了相同的问题。

//编辑1： 以下是您可以查看的网址：http://toolboxstudio.co.za/version3/?page=packages

如果您想查看容器看起来如何为空：http://toolboxstudio.co.za/version3/?page=packages#empty，则可以单击横幅下方的按钮（设计或Web）。它将淡入正确的内容，并在两者之间切换。确保您的页面只适合整个页面，空容器在页脚下方没有多余的空间。然后单击按钮并向下滚动一小段，在两个按钮之间切换。你会看到我对跳页的意思。

以下是代码：

$("div.design.button a").click(function () {
    $(this).parent("div").addClass("active");
    $("div.web.button").removeClass("active");

    if ($("div.web_content").is(":visible")) {
        $("div.web_content").fadeOut(function () {
            $("div.design_content").fadeIn();
        });
    } else {
        $("div.design_content").fadeIn();
    }
    window.location.hash = "#design";
    resizeWindow();

    e.returnValue = false;
    e.preventDefault();

    return false;

    alert("hello");     
});

$("div.web.button a").click(function () {
    $(this).parent("div").addClass("active");
    $("div.design.button").removeClass("active");

    if ($("div.design_content").is(":visible")) {
        $("div.design_content").fadeOut(function () {
            $("div.web_content").fadeIn();
            return false;
        });
    } else {
        $("div.web_content").fadeIn();
        return false;
    }
    window.location.hash = "#web";
    resizeWindow();

    e.returnValue = false;
    e.preventDefault();

    return false;

    alert("world");
});

Answer 1

我想我通过将代码更改为：

来修复它

$("div.design.button a").click(function () {
    $(this).parent("div").addClass("active");
    $("div.web.button").removeClass("active");

    if ($("div.web_content").is(":visible")) {
        $("div.web_content").fadeOut();
        $("div.design_content").fadeIn();
            return false;
    } else {
        $("div.design_content").fadeIn();
    }
    window.location.hash = "#design";
    resizeWindow();

    e.returnValue = false;
    e.preventDefault();

    return false;

    alert("hello");     
});

$("div.web.button a").click(function () {
    $(this).parent("div").addClass("active");
    $("div.design.button").removeClass("active");

    if ($("div.design_content").is(":visible")) {
        $("div.design_content").fadeOut();
        $("div.web_content").fadeIn();
    } else {
        $("div.web_content").fadeIn();
    }
    window.location.hash = "#web";
    resizeWindow();

    e.returnValue = false;
    e.preventDefault();

    return false;

    alert("world");
});

@galambalazs：

不，我不认为就是这样，因为我首先删除了它，没有任何改变。我只是没有怀疑这将是我所做的回调函数错误，这将是罪魁祸首。

对不起所有人，我真的很挣几个小时，StackOverflow总是我最后的选择。然后我就决定尝试一下这就行了。

抱歉，我无法上传代码，因此您可以看到我的意思是“它现在正常工作”，SEACOM已关闭，我们的资源有限，我们的FTP端口现已被阻止。 < / p>

Answer 2

您好AnriëtteCombrink，您完全忘记在点击事件Handler中提及该事件，

我认为return false就够了，

请删除以下内容

e.returnValue = false;
e.preventDefault();

由于您未指定e（事件），因此无法使用 returnValue ， preventDefault

我认为这应该有用，如果没有，请告诉我们

祝你有个美好的一天!!

jQuery表现得很奇怪

2 个答案: