深度链接div区块

我正在寻找深度链接div区块的方法。在特定的页面上，我可能会有几个div块，每个块都有自己的内容。其中一个块是可见的，其他块是隐藏的。一旦链接或按钮被按下，相应的div将被显示，而其他的被隐藏。这里是div的HTML：深度链接div区块

<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的教程，但无法完全弄清楚如何将其应用于我的案例。

来源

2012-08-13 Ilya Shmorgun

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-13 13:31:21

工作。谢谢！ – 2012-08-13 14:18:35

没问题。这两个例子都假设有一个有效的#hash。您可能想要添加一些错误检查。 – 2012-08-13 21:50:20

我觉得这是更好地添加和删除，然后具有所需的CSS效果类。我相信这样更有效率，但我可能是错的。

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

只要浏览器历史支持。你需要这个跨浏览器支持吗？所有浏览器都不支持html5历史API。这可能不是您的问题或担忧。支持的浏览器

列表
http://caniuse.com/#search=history

我已经使用jQuery的烧烤历史支持添加到Web应用程序。它在旧版浏览器中运行良好。
http://benalman.com/projects/jquery-bbq-plugin/

对于大项目的JavaScript Backbone.js的是去的方式有浏览器历史记录的支持以及其他许多有用的内置功能，可以轻松管理您的代码库。

来源

2012-08-13 13:44:20 jlonganecker

深度链接div区块

回答

相关问题