0

我正在寻找一种深度链接 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的教程，但不太清楚如何将它应用到我的案例中。

4

2 回答 2

0 
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();
}
于 2012-08-13T13:31:21.493 回答
0

我认为添加和删除类然后具有所需的 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 是可行的方法，它支持浏览器历史记录以及许多其他有用的内置函数，可以轻松管理您的代码库。

于 2012-08-13T13:44:20.907 回答