Question

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

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

三个子div的宽度为1200px，在父级内部并列并且。

所以第一个div是左：0px，第二个div留下：1200px，第三个剩下：2400px。

现在我的目标是点击和divs移位。（父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>

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

hashchange事件可能的bug

1 个答案: