0

いくつかのリンクがあるページがあります。これらの各リンクは、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 を持っているため、これはそれほど奇妙ではありません。各リンクのファンシーボックス ウィンドウで正しいコンテンツを開くための最善の解決策は何ですか?

編集：私の問題は解決したと思います。以下のコードを使用します。

<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>

このコードは正しいですか?

4

1 に答える 1

0

IDページ上の複数の要素に同じものを使用しないでください。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>
于 2013-01-08T09:41:53.800 に答える