我如何将超链接链接到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 href="#"></a>一样简单，但这不起作用。我很乐意听到其他选择。

Answer 1

您可以使用data-*（在所有主要浏览器中为.dataset）访问数据属性（currently supported）中的值。即要访问元素的属性data-src的值，应编写：

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

也就是说，您可以使用一些JS实现您想要的（我想）：将<div data-src=<url_to_image>...转换为链接到某个页面的图像。
另请参阅此
short demo。