1

我有一个 jQuery 脚本，可以在其父容器内的容器之间淡入淡出。根据单击的按钮（设计、网页），它确定哪个容器 ( #design, #web) 淡出以及哪个容器在其位置淡入。

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

有没有其他人遇到过这个？非常感谢任何建议，因为这个问题一直困扰着我。

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

// 编辑 1： 这是一个您可以查看的 URL：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");
});
4

2 回答 2

1

你好 Anriëtte Combrink，你完全忘了在点击事件处理程序中提及事件，

我觉得 return false 就够了

请删除以下行

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

因为你没有指定e（事件）你不能使用returnValue，preventDefault

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

祝你有美好的一天 ！！

于 2010-07-06T12:44:16.060 回答
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 端口现在已被阻止。

于 2010-07-06T11:47:08.267 回答