Как использовать jQuery для создания хэша с закладками?

Question

У меня есть один URL-адрес, который я использую в качестве галереи изображений. При этом URL является превью div (я только показывать четыре больших пальца для краткости):

<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 использует идентификатор щелкнули картинку, чтобы clone() И.М. возрастов от соответствующего span и опустить их в #content с использованием метода html(). Он отлично работает. Теперь я хотел бы вернуться к 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" .. .so это уже #ID selector, мы просто проверяем, что это хэш, о котором мы заботимся, а затем используя этот селектор для запуска .click(). Просто убедитесь, что это работает после ваш текущий обработчик кликов для больших пальцев привязан.