Javascript 深度连接分区块

我正在寻找一种方法来深入链接div块。在特定页面上，我可能有几个div块，每个块都有自己的内容。其中一个块可见，其他块隐藏。按下链接或按钮后，将显示相应的div，并隐藏其他div。以下是div的HTML：

<div id="6ba28aae2dae153a1686cfee276632d8" class="page-block" style="display: block;">
    <p>
    1st block. 
    </p>        
</div>
<div id="55cead0effa915778913d8667d0ae3a9" class="page-block" style="display: none;">
    <p>
    2nd block. 
    </p>
</div>

第一街区。


第二街区。

下面是用于切换块的JavaScript

/* Hide and show necessary blocks. */
function switchBlocks(UID)
{
    var blocks = $('div.page-block');

    for (i=0; i<blocks.length; i++) 
    {
        if (blocks[i].id == UID) 
        {
            blocks[i].style.display= 'block';

            // Get the current URL and split it at the # mark
            urlArray = window.location.href.split("#");
            // Select the part before #
            subURL = urlArray[0];
            // Create a fake URL by adding UID to subURL
            history.pushState(null, null, subURL + '#' + UID);
        } 
        else 
        {
            blocks[i].style.display= 'none';
        }
    }
}

/*隐藏和显示必要的块*/
功能开关块（UID）
{
变量块=$（'div.page-block'）；
对于（i=0；i
或

我认为最好是添加和删除类，然后获得想要的css效果。我相信这更有效，但我可能错了

您还可以存储对正在显示的旧div的引用，这样您就可以隐藏该div并显示另一个，而不是遍历整个div列表。实际上，您只需要显示一个div并隐藏一个div

就浏览器历史记录支持而言。您需要跨浏览器支持吗？并非所有浏览器都支持html5历史记录API。这可能不是您的问题或顾虑

支持的浏览器列表


我曾使用jquery bbq向web应用程序添加历史记录支持。它在较旧的浏览器中运行良好。


对于大型javascript项目来说，Backbone.js是一个不错的选择，它支持浏览器历史记录以及许多其他有用的内置函数，可以方便地管理代码库。
没问题。两个示例都假设存在有效的散列。您可能需要添加一些错误检查。
if(window.location.hash == "#55cead0effa915778913d8667d0ae3a9")
{
 $("div.page-block").hide();
 $("div#55cead0effa915778913d8667d0ae3a9").show();
}

hash_id = window.location.hash;
if(hash_id.length > 0)
{
 $("div.page-block").hide();
 $(hash_id).show();
}