哈希更改事件可能的错误

hashchange event possible bug

本文关键字：错误 事件 哈希更      更新时间：2023-09-26

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

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

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

所以第一个div是左：0px，第二个是左：1200px，第三个是左：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");
});

这非常有效。

现在问题来了。

当我对哈希更改事件做完全相同的事情时：

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 的左边框。它处于一些负利润率。

唯一有变化的是哈希事件。

我希望我解释得足够好。

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

完全相同

的逻辑如何与点击事件一起工作，而不是与哈希更改事件一起工作，这真的很奇怪。

有两种方法可以实现此目的。

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/

相关文章：