Question

我正在寻找深层链接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';
        }
    }
}

我现在要做的是使用块ID为每个块分配其唯一的URL。我能够使用相关ID更新URL，但无法弄清楚如何将特定URL链接到特定块，以便在访问其URL时显示相应的块。

我已经在HTML5 History API上学习了教程，但无法弄清楚如何将它应用到我的案例中。

Answer 1

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();
}

Answer 2

我认为最好添加和删除具有所需css效果的类。我相信这更有效但我可能错了。

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

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

支持的浏览器列表
http://caniuse.com/#search=history

我已使用 jquery bbq 向Web应用程序添加历史记录支持。它适用于旧浏览器。
http://benalman.com/projects/jquery-bbq-plugin/

对于大型javascript项目，Backbone.js可以提供浏览器历史记录以及许多其他有用的内置函数，使您可以轻松管理代码库。

深层链接div块

2 个答案: