5

HTML5 ドキュメントを w3c で検証しようとしています。シンプルなライト ボックスと画像ギャラリーに fancybox jQuery プラグインを使用しています。各画像ギャラリーを区別するために、relタグを使用しています。

ページを検証すると、次のエラーが表示されます。

要素 a の属性 rel の値ギャラリーが正しくありません: 絶対 IRI ではありません。文字列ギャラリーは、登録されたキーワードまたは絶対 URL ではありません。

これが私のコードです:

<div class="portItem">
    <div class="thumbs">
        <div class="items">
        <img src="images/rsl.jpg" class="col" alt="A website for R.S.Lynch and Company"/>
        <div class="caption">
            <a class="fancybox" rel="gallery1" href="images/rs1.jpg">R.S.Lynch & Company</a>
            <div class="hidden">
            <a class="fancybox" rel="gallery1" href="images/rs2.jpg"></a>
            <a class="fancybox" rel="gallery1" href="images/rs3.jpg"></a>
            <a class="fancybox" rel="gallery1" href="images/rs4.jpg"></a>
            <a class="fancybox" rel="gallery1" href="images/rs5.jpg"></a>
            </div>
        </div>
        </div>
    </div>
</div>

使用して同じ結果を得るためのより良いタグはありますか? ありがとう

4

3 に答える 3

6

data次のように、ここで -family 属性を使用することをお勧めします。

<a class="fancybox" data-gallery="1" href="images/rs1.jpg">R.S.Lynch & Company</a>
<a class="fancybox" data-gallery="1" href="images/rs2.jpg">...</a>
<a class="fancybox" data-gallery="1" href="images/rs3.jpg">...</a>
<a class="fancybox" data-gallery="1" href="images/rs4.jpg">...</a>
<a class="fancybox" data-gallery="1" href="images/rs5.jpg">...</a>

... このタイプの属性は、特定のデータを DOM 要素に添付するために特別に設計されたものです。class私の意見では、を使用するよりもセマンティックです。

$('some selector').data('gallery')これらの値には、構文を使用して簡単にアクセスできます。

属性に関しては、HTML5 では事前定義された属性relのセットに制限されているように見え、ドキュメント間のより高レベルの関係を定義するために使用されます。

于 2012-11-03T23:50:54.977 に答える
0

代わりに、ギャラリーごとにクラスを追加できます。class="fancybox gallery1"

于 2012-11-03T23:50:37.437 に答える
-1
<a class="fancybox" data-gallery="1" href="images/img1.jpg">...</a>
<a class="fancybox" data-gallery="1" href="images/img2.jpg">...</a>

$(".fancybox").attr('rel', 'data-gallery').fancybox();

于 2015-03-23T10:55:05.170 に答える