0

Javascript で非常に珍しいバグを見つけたと思いますが、よくわかりません。

したがって、3 つの子 div が親 div 内に絶対配置されています (つまり、相対位置です)。

3 つの子 div は幅 1200 ピクセルで、親内に並んでいます。

したがって、最初の div は left:0px、2 番目は left:1200px、3 番目は left:2400px です。

今の私の目標は、クリックして div をシフトすることです。(親 div は 1200 ピクセルのビューポートとして機能しています)

$("#blogNav").click(function() 
{
    $("#blog").css( "left", "0px");
    $("#software").css( "left", "1200px");
    $("#about").css( "left",  "2400px");
});


$("#softwareNav").click(function() 
{
    $("#blog").css( "left", "-1200px");
    $("#software").css( "left", "0px");
    $("#about").css( "left",  "1200px");

});

$("#aboutNav").click(function() 
{
    $("#blog").css( "left", "-2400px");
    $("#software").css( "left", "-1200px");
    $("#about").css( "left",  "0px");

});

これは完璧に機能します。

では、本題です。

hashchange イベントでまったく同じことを行うと、次のようになります。

window.onhashchange = function()
{
    if(window.location.hash=="#blog")
    {
            $("#blog").css( "left", "0px");
            $("#software").css( "left", "1200px");
            $("#about").css( "left",  "2400px");

    }
    if(window.location.hash=="#software")
    {
            $("#blog").css( "left", "-1200px");
            $("#software").css( "left", "0px");
            $("#about").css( "left",  "1200px");

    }
    if(window.location.hash=="#about")
    {
            $("#blog").css( "left", "-2400px");
            $("#software").css( "left", "-1200px");
            $("#about").css( "left",  "0px");
}
};

ポジショニングはすべて台無しです。

親 div の 0px の位置が移動され、0px が親 div の左端ではなくなります。そのいくつかの負のマージンにあります。

変更があるのは hashevent だけです。

これを十分に説明できていることを願っています。

近いうちにいくつかの例を自分のサイトにアップロードしようと思います。

まったく同じロジックがクリック イベントでは機能するのに、hashchange イベントでは機能しないのは非常に奇妙です。

4

1 に答える 1

1

これを達成するには 2 つの方法があります。

HTML マークアップ (提供しなかったため、テスト用)

<p>
    <a href="#blog">Blog</a>
    <a href="#software">Software</a>
    <a href="#about">About</a>
</p>
<div id="container">
    <div id="blog">Blog</div>
    <div id="software">Software</div>
    <div id="about">About</div>
</div>

- 最初 (私の選択) は、Javascript の使用を忘れて、単純な CSS ですべてを行うことです。

CSS

a {
    display: inline-block;
    margin: 0 5px;
}
div {
    width: 300px;
    /* 1200px would be too much to test on jsFiddle */
    height: 200px;
    color: white;
}
#container {
    overflow: hidden;
}
#container > div {
    display: inline-block;
}
#blog {
    background-color: red;
}
#software {
    background-color: blue;
}
#about {
    background-color: green;
}

デモ: http://jsfiddle.net/JWzaw/1/

-2番目は、提案したようにjQuery（Javascript）を使用することです：

CSS

a {
    display: inline-block;
    margin: 0 5px;
}
div {
    width: 300px;
    /* 1200px would be too much to test on jsFiddle */
    height: 200px;
    color: white;
}
#container {
    position: relative;
    overflow: hidden;
}
#container > div {
    position: absolute;
    top: 0px;
}
#blog {
    left: 0px;
    background-color: red;
}
#software {
    left: 300px;
    background-color: blue;
}
#about {
    left: 600px;
    background-color: green;
}

jQuery (ジャバスクリプト)

$(function () {
    $("a").on("click", function (e) {
        e.preventDefault();

        var left = 300;

        $("#container > div").not($(this)).each(function (ind, el) {
            $(this).css("left", left + "px"); 
            left += 300;
        });

        $($(this).prop("hash")).css("left", "0px");
    });
});

デモ: http://jsfiddle.net/JWzaw/2/

于 2013-09-11T09:04:50.053 に答える