如何使用jQuery創建書籤可用的散列？

Question

我有一個URL用作圖片庫。在這個網址是一個拇指div（我只顯示爲簡便起見4個大拇指）：

<div id="thumbs"> 
<img src="graphics/thumbs/01.jpg" width="190" height="190" class="thumb objects" id="project01" /> 
<img src="graphics/thumbs/08.jpg" width="190" height="190" class="thumb web" id="project08" /> 
<img src="graphics/thumbs/14.jpg" width="190" height="190" class="thumb freehand" id="project14"/> 
<img src="graphics/thumbs/04.jpg" width="190" height="190" class="thumb freehand objects" id="project04" /></div> 

和空div稱爲#content：

<div id="content"></div> 

和隱藏div稱爲#preload：

<div id="preload"> 
<span id="project01_content"><img src="graphics/010.jpg" /></span> 
<span id="project02_content"><img src="graphics/022.jpg" /><img src="graphics/021.jpg" /><img src="graphics/023.jpg" /><img src="graphics/020.jpg" /></span> 
<span id="project03_content"><img src="graphics/030.jpg" width="450" height="600" /><img src="graphics/031.jpg" width="450" height="600" /></span> 
<span id="project04_content"><img src="graphics/040.jpg" width="775" height="600" /><img src="graphics/041.jpg" width="775" height="600" /></span></div> 

我的jQuery使用點擊縮略圖的ID到clone() im從相應的span開始，並使用html()方法將它們放入#content。它效果很好。現在，我想返回到mysite.com/#project01，並且#content已經填充了項目01.

如何爲每個圖像分配一個哈希URL以調用相同的jQuery狀態？

Answer 1

您只需儘快執行對拇指點擊網頁加載和當前的代碼應該執行，就像這樣：

$(function() { 
    if(window.location.hash.indexOf('project') > -1) 
    $(window.location.hash).click(); 
}); 

它使用window.location.hash property這將是你的榜樣URL "#project01" ..因此它已經是#ID selector，我們只是檢查它是我們關心的散列，然後使用該選擇器來觸發.click()。只要確保在之後運行，您當前的拇指點擊處理程序就會被綁定。