Несколько ссылок на странице, которые нужно открыть в окне fancybox

У меня есть страница с несколькими ссылками. Каждая из этих ссылок должна открываться в окне 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 имеют одинаковый идентификатор. Какое лучшее решение для открытия правильного содержимого в окне 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>

Этот код правильный?


jquery fancybox
person user1957551    schedule 08.01.2013    source источник
comment
Вы никогда не должны использовать один и тот же идентификатор для более чем одного элемента на странице.   -  person Māris Kiseļovs    schedule 08.01.2013
comment
использовать разные ids и похожие class для стилей CSS?   -  person Amyth    schedule 08.01.2013

Ответы (1)


arrow_upward
0
arrow_downward

У вас никогда не должно быть одного и того же ID для более чем 1 элемента на странице. Если вы хотите применить похожие CSS стили или связать несколько элементов с javascript, вам следует использовать аналогичный class.

Что-то вроде этой скрипты

Образец кода

<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>
person Amyth    schedule 08.01.2013
comment
Я знаком с тем, что все элементы должны иметь уникальный идентификатор, но я не знаю, как мне с этим справиться в jquery. Вы знаете, как это сделать в Jquery? - person user1957551; 08.01.2013
comment
Я думаю, что моя проблема решена. Я использую следующий код: ‹a href=#1 class=fancybox› Ссылка 1 ‹/ a› ‹div class=inline id=1› Содержимое ссылки 1, которая открывается в окне fancybox ‹/ div› ‹a href=# 2 class=fancybox› Ссылка 2 ‹/ a› ‹div class=inline id=2› Содержимое ссылки 2, которая открывается в окне fancybox ‹/ div› ‹a href=#3 class=fancybox› Ссылка 3 ‹/ a› ‹div class=inline id=3› Содержимое ссылки 3, которая открывается в окне fancybox ‹/ div› Верен ли этот код? - person user1957551; 08.01.2013