深度鏈接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區塊

回答

相關問題