我有一个<div>块与一些花哨的视觉内容,我不想改变。我想让它成为一个可点击的链接。
我正在寻找类似于<a href="…"><div>…</div></a>,但这是有效的XHTML 1.1。
我有一个<div>块与一些花哨的视觉内容,我不想改变。我想让它成为一个可点击的链接。
我正在寻找类似于<a href="…"><div>…</div></a>,但这是有效的XHTML 1.1。
当前回答
如果你可以使用bootstrap,一个简单的解决方案是使用bootstrap .stretch -link。
https://getbootstrap.com/docs/4.3/utilities/stretched-link/
示例代码
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
其他回答
需要一点javascript。 但是,你的div是可点击的。
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
您还可以尝试包装一个锚,然后将其高度和宽度与其父相同。这对我来说非常合适。
<div id="css_ID">
<a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>
将你的div包含在一个锚标记<a href></a>中:
<a href="">
<div>anything goes here will turn into a link</div>
</a>
还有一个没有提到的选项是使用flex。通过对a标记应用flex: 1,它将展开以适应容器。
div { 身高:100 px; 宽度:100 px; 显示:flex; 边框:1px实体; } 一个{ flex: 1; } < div > 链接< a href = " http://google.co.uk " > < / > < / div >
我自作聪明的回答是:
对“如何使块级元素成为超链接并在XHTML 1.1中验证”的回避回答
使用HTML5 DOCTYPE DTD即可。”
但ie7并不适用
onclick = " location.href =“page.html”;“
适用于IE7-9, Chrome, Safari, Firefox,