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）をクリックします。正しいコンテンツでフェードインし、2つを切り替えます。フッターの下に余分なスペースがなく、空のコンテナーが入ったページ全体にページが収まるようにしてください。次に、ボタンをクリックして少し下にスクロールし、2つのボタンを切り替えます。ページジャンプについて私が何を意味するかがわかります。

コードは次のとおりです。

$("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

コードを次のように変更して修正したと思います。

$("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 に答える
1

こんにちはAnriëtteCombrink、クリックイベントハンドラーでイベントについて言及するのを完全に忘れました。

return false 十分だと思います が

次の行を削除してください

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

（イベント）を指定していないため、 returnValue、preventDefaulteを使用できません

これでうまくいくと思いますが、そうでない場合はお知らせください

良い一日を過ごしてください ！！

于 2010-07-06T12:44:16.060 に答える