如何將超鏈接鏈接到 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>...轉換為鏈接到某個頁面的圖像。

另請參閱此簡短演示。