Question

我有一个我用作图片库的网址。这个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使用点击的缩略图的ID来clone()来自相应span的图片，并使用#content方法将其放入html()。它很棒。现在，我想回到mysite.com/#project01，#content已经填满了Project 01。

如何为每个图像提供一个将调用相同jQuery状态的散列URL？

Answer 1

只要页面加载并且您的当前代码应该执行，您就可以在该拇指上单击一下，如下所示：

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

这会使用您的示例网址中"#project01"的{{3}} ...所以它已经是window.location.hash property，我们只是检查它是我们关心的哈希，然后使用该选择器触发#ID selector。只需确保在之后运行当前的拇指绑定处理程序。

如何使用jQuery创建可书签的哈希？

1 个答案: