HTML rel標記

我想用w3c來驗證我的HTML5文檔。我爲簡單的燈箱和圖像畫廊使用了fancybox jQuery插件。爲了區分每個圖庫，我使用了rel標籤。HTML rel標記

當我確認我的網頁，我得到以下錯誤：

Bad value gallery for attribute rel on element a: Not an absolute IRI. The string gallery is not a registered keyword or absolute 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>

是否有更好的標籤使用，並得到同樣的結果？由於

來源

2012-11-03 Chris Frank

我建議使用data - 家庭屬性在這裏，像這樣：

<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集合，用於定義文檔之間的更高級關係。

來源

2012-11-03 23:50:54 raina77ow

謝謝:)這幫了我很多。 –

優秀，謝謝！我不得不改變我正在使用的jcarousel插件的「rel」代碼，但之後它就像一個魅力！我使用數據幻燈片來達到我的特定目的。 –

你可以添加一個類每家畫廊，而不是：class="fancybox gallery1"

來源

2012-11-03 23:50:37

-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-23 10:55:05

請提供評論給您的答案。 –

回答

相關問題