Question

我有一个包含多个链接的页面。这些链接中的每一个都应该在fancybox窗口中打开。 HTML的结构是这样的：

<a href="#inline" class="fancybox"> Link 1 </ a>
<div id="inline"> Content for link 1 that opens in a fancybox window </ div>

<a href="#inline" class="fancybox"> Link 2 </ a>
<div id="inline"> Content for link 2 that opens in a fancybox window </ div>

<a href="#inline" class="fancybox"> Link 3 </ a>
<div id="inline"> Content for link 3 that opens in a fancybox window </ div>

通过点击任何链接将打开一个fancybox窗口，但并不总是使用正确的内容。这并不奇怪，因为所有内容div都具有相同的ID。什么是在每个链接的fancybox窗口中打开正确内容的最佳解决方案？

编辑：我想我的问题已经解决了。我使用下面的代码：

<a href="#1" class="fancybox"> Link 1 </ a>
<div class="inline" id="1"> Content for link 1 that opens in a fancybox window </ div>

<a href="#2" class="fancybox"> Link 2 </ a>
<div class="inline" id="2"> Content for link 2 that opens in a fancybox window </ div>

<a href="#3" class="fancybox"> Link 3 </ a>
<div class="inline" id="3"> Content for link 3 that opens in a fancybox window </ div>

这段代码是否正确？

Answer 1

对于页面上超过1个元素，您永远不应该拥有相同的ID。如果您要应用类似的CSS样式或将多个元素绑定到javascript，则应使用类似的class。

像This Fiddle

这样的东西

示例代码

<a class="fancy_link" id="link_1" href="#!">Content</a>
<a class="fancy_link" id="link_2" href="#!">Content</a>
<a class="fancy_link" id="link_3" href="#!">Content</a>

页面上需要在fancybox窗口中打开的几个链接

1 个答案:

示例代码