我正在尝试为我的 HTML5 站点实现为 XHTML 1.0 doctype 编写的 JQuery 图像库,问题是我不能在 HTML5 中使用自定义“rel”属性:
<!-- In <head> tag -->
<script type="text/javascript">
$(document).ready(function(){
$("a[rel='first_gallery']").colorbox({opacity: ".75"});
$("a[rel='second_gallery']").colorbox({opacity: ".75"});
});
</script>
<!-- In <body> tag -->
<a href="first_gallery/1.jpg" title="Image 1" rel="first_gallery"><img src="images/1_thumbnail.jpg" alt="Image 1 Thumbnail"/></a>
<a href="second_gallery/2.jpg" title="Image 2" rel="second_gallery"><img src="images/2_thumbnail.jpg" alt="Image 2 Thumbnail"/></a>
我尝试使用 HTML5 自定义“data-rel”属性而不是“rel”,但我的 JQuery 有什么问题?
<!-- In <head> tag -->
<script type="text/javascript">
$(document).ready(function(){
$("a[data-rel='first_gallery']").colorbox({opacity: ".75"});
$("a[data-rel='second_gallery']").colorbox({opacity: ".75"});
});
</script>
<!-- In <body> tag -->
<a href="first_gallery/1.jpg" title="Image 1" data-rel="first_gallery"><img src="images/1_thumbnail.jpg" alt="Image 1 Thumbnail"/></a>
<a href="second_gallery/2.jpg" title="Image 2" data-rel="second_gallery"><img src="images/2_thumbnail.jpg" alt="Image 2 Thumbnail"/></a>