hashchange事件可能的错误

Question

我认为我在javascript中发现了一个非常不寻常的错误，但不确定。

因此，我有三个绝对位于父div内的子div（即相对位置）。

三个子div的宽度为1200px，在父级中并排放置。

因此，第一个div左为0px，第二个div为左：1200px，第三个div为：2400px。

现在我的目标是单击并移动div。（父div用作1200px视口）

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

我希望我对此解释得足够好。

我将尝试尽快将一些示例上传到我的网站。

完全相同的逻辑如何与click事件一起工作，而不与hashchange事件一起工作，这真的很奇怪。

Answer 1

您可以通过两种方式实现这一目标。

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>

-首先（我的选择）是忘记使用Java脚本，并使用简单的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/

-其次是按照您的建议使用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（JavaScript）

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