Question

我正在尝试使用w3c验证我的HTML5文档。我正在使用fancybox jQuery插件来处理简单的灯箱和图像库。为了区分每个图库，我使用的是rel标记。

当我验证我的页面时，我收到以下错误：

属性关于元素a的错误值库：不是绝对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>

是否有更好的标签可供使用并获得相同的结果？感谢

Answer 1

我建议在这里使用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')语法轻松访问这些值。

对于rel属性，它看起来像在HTML5中，它仅限于预定义attributes的集合，并用于定义文档之间更高级别的关系。

Answer 2

您可以为每个图库添加一个类：class="fancybox gallery1"

Answer 3

<a class="fancybox" data-gallery="1" href="images/img1.jpg">...</a>
<a class="fancybox" data-gallery="1" href="images/img2.jpg">...</a>

$（＆＃34; .fancybox＆＃34;）。attr（＆＃39; rel＆＃39;，＆＃39; data-gallery＆＃39;）。fancybox（）;

HTML rel标签

3 个答案: