html - 如何将超链接链接到 HTML5使用数据属性的图像

Question

这是我最近一直在开发的响应式 HTML5 画廊。我只希望每张图片链接到不同的页面。

<ul class="gallery">

    <li>

    <div data-alt="img03" data-description="<h3>Project</h3>" data-max-width="1800" data-max-height="1350" >
    <div data-src="images/xxxlarge/1.jpg" data-min-width="1300"></div>

    </div>

    </li>

我知道它应该像添加 a 一样简单，<a href="#"></a>但这不起作用。我愿意听取其他选择。

Answer 1

data-*您可以使用.dataset（目前在所有主要浏览器中都支持）访问数据属性 ( ) 中的值。即访问data-src一个元素的属性值，你会写：

var srcValue = varHoldingElemNode.dataset.src;   // or
var srcValue = varHoldingElemNode.dataset["src"];

也就是说，您可以使用一些 JS 来实现您想要的（我想）：将 a<div data-src=<url_to_image>...变成链接到某个页面的图像。

另请参阅这个简短的演示。