hashchange 事件可能的错误

Question

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

所以我有三个子 div 绝对位于父 div 内（即相对位置）。

三个子 div 的宽度为 1200 像素，并且在父级中并排。

所以第一个div是left:0px，第二个是left:1200px，第三个是left: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。

我希望我解释得足够好。

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

这真的很奇怪，完全相同的逻辑如何与点击事件一起工作，而不是与 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>

- 首先（我的选择）是忘记使用 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/

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