[英]How do I link a hyperlink to an HTML5 <li> image that uses data attributes
This is a responsive HTML5 gallery that I've been working on recently.这是我最近一直在研究的响应式 HTML5 画廊。 I just want each image to link to a different page.
我只希望每个图像链接到不同的页面。
<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>
I know that it should be as simple as adding a <a href="#"></a>
but this isn't working.我知道它应该像添加
<a href="#"></a>
一样简单,但这不起作用。 I am open to hear about other options.我愿意听取其他选择。
You can access the values in data-attributes ( data-*
) using .dataset
( currently supported in all major browsers).您可以使用
.dataset
(当前所有主要浏览器都支持)访问数据属性 ( data-*
) 中的值。 Ie to access the value of the attribute data-src
of an element, you would write:即要访问元素的属性
data-src
的值,您可以编写:
var srcValue = varHoldingElemNode.dataset.src; // or
var srcValue = varHoldingElemNode.dataset["src"];
That said, you can use some JS to achieve what (I suppose) you want: turning a <div data-src=<url_to_image>...
into an image linking to some page.也就是说,您可以使用一些 JS 来实现(我想)您想要的:将
<div data-src=<url_to_image>...
转换为链接到某个页面的图像。
See, also, this short demo .另请参阅此简短演示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.