我有一个<div>块与一些花哨的视觉内容,我不想改变。我想让它成为一个可点击的链接。
我正在寻找类似于<a href="…"><div>…</div></a>,但这是有效的XHTML 1.1。
我有一个<div>块与一些花哨的视觉内容,我不想改变。我想让它成为一个可点击的链接。
我正在寻找类似于<a href="…"><div>…</div></a>,但这是有效的XHTML 1.1。
当前回答
最简洁的方法是使用jQuery和HTML中引入的数据标记。使用这个解决方案,您可以在每个标签上创建一个链接。首先用data-link标签定义标签(例如div):
<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>
现在,您可以随意设置div的样式。你还必须为类似“link”的行为创建样式:
[data-link] {
cursor: pointer;
}
最后把jQuery调用放到页面上:
$(document).ready(function() {
$("[data-link]").click(function() {
window.location.href = $(this).attr("data-link");
return false;
});
});
jQuery通过这段代码对页面上具有“data-link”属性的每个标记应用一个点击监听器,并重定向到数据链接属性中的URL。
其他回答
这对我来说很有用:
<div onclick="location.href='page.html';" style="cursor:pointer;">...</div>
这是实现你想要的东西的“有效”解决方案。
<style type="text/css">
.myspan {
display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>
但最可能的是,您真正想要的是将<a>标记显示为块级元素。
我不建议使用JavaScript来模拟超链接,因为这违背了标记验证的目的,标记验证的最终目的是提高可访问性(按照适当的语义规则发布格式良好的文档可以最大限度地减少不同浏览器对同一文档的不同解释)。
最好是发布一个不需要验证,但在所有浏览器(包括禁用JavaScript的浏览器)上都能正常渲染和运行的网页。此外,使用onclick不会为屏幕阅读器提供语义信息,以确定div是作为链接使用的。
我自作聪明的回答是:
对“如何使块级元素成为超链接并在XHTML 1.1中验证”的回避回答
使用HTML5 DOCTYPE DTD即可。”
但ie7并不适用
onclick = " location.href =“page.html”;“
适用于IE7-9, Chrome, Safari, Firefox,
这是最简单的方法。
比如说,这是我想要的可点击的div块:
<div class="inner_headL"></div>
所以输入href,如下所示:
<a href="#">
<div class="inner_headL"></div>
</a>
只需将div块视为普通的html元素,并启用通常的a href标记。 至少在FF上是有效的。
实际上你现在需要包括JavaScript代码, 请查看本教程。
但有一个棘手的方法来实现这个使用CSS代码 你必须在你的div标签内嵌套一个锚标签,你必须应用这个属性,
display:block;
当你这样做了,它将使整个宽度区域可点击(但在锚标签的高度内),如果你想覆盖整个div区域,你必须将锚标签的高度设置为div标签的高度,例如:
height:60px;
这将使整个区域可点击,然后你可以应用text-indent:-9999px到锚标签来实现目标。
这是非常棘手和简单的,它只是用CSS代码创建的。
这里有一个例子:http://jsfiddle.net/hbirjand/RG8wW/