如何将超链接链接到 HTML5<li> 使用数据属性的图像

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

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

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

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

另请参阅此简短演示。