我有一个<div>块与一些花哨的视觉内容,我不想改变。我想让它成为一个可点击的链接。
我正在寻找类似于<a href="…"><div>…</div></a>,但这是有效的XHTML 1.1。
我有一个<div>块与一些花哨的视觉内容,我不想改变。我想让它成为一个可点击的链接。
我正在寻找类似于<a href="…"><div>…</div></a>,但这是有效的XHTML 1.1。
当前回答
你可以通过以下方法给你的div一个链接:
<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
cursor:pointer;
width:200px;
height:200px;
background-color:#FF0000;
color:#fff;
text-align:center;
font:13px/17px Arial, Helvetica, sans-serif;
}
</style>
其他回答
我来这里是希望能找到比我更好的解决办法,但这里提供的办法我一个都不喜欢。我想你们有些人误解了这个问题。OP希望使一个充满内容的div表现得像一个链接。其中一个例子是facebook的广告——如果你仔细观察,你会发现它们实际上是适当的标记。
对我来说,不应该的是:javascript(不应该只是一个链接,非常糟糕的SEO/可访问性);无效的HTML。
本质上是这样的:
Build your panel using normal CSS techniques and valid HTML. Somewhere in there put a link that you want to be the default link if the user clicks on the panel (you can have other links too). Inside that link, put an empty span tag (<span></span>, not <span /> - thanks @Campey) give the panel position:relative apply the following CSS to the empty span: { position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 1; /* fixes overlap error in IE7/8, make sure you have an empty gif */ background-image: url('empty.gif'); } It will now cover the panel, and as it's inside an <A> tag, it's a clickable link give any other links inside the panel position:relative and a suitable z-index (>1) to bring them in front of the default span link
将你的div包含在一个锚标记<a href></a>中:
<a href="">
<div>anything goes here will turn into a link</div>
</a>
需要一点javascript。 但是,你的div是可点击的。
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
我引入了一个变量,因为我的链接中的一些值将根据用户来自的记录而改变。 这适用于测试:
<div onclick="location.href='page.html';" style="cursor:pointer;">...</div>
这个也有用:
<div onclick="location.href='<%=Webpage%>';" style="cursor:pointer;">...</div>
实际上你现在需要包括JavaScript代码, 请查看本教程。
但有一个棘手的方法来实现这个使用CSS代码 你必须在你的div标签内嵌套一个锚标签,你必须应用这个属性,
display:block;
当你这样做了,它将使整个宽度区域可点击(但在锚标签的高度内),如果你想覆盖整个div区域,你必须将锚标签的高度设置为div标签的高度,例如:
height:60px;
这将使整个区域可点击,然后你可以应用text-indent:-9999px到锚标签来实现目标。
这是非常棘手和简单的,它只是用CSS代码创建的。
这里有一个例子:http://jsfiddle.net/hbirjand/RG8wW/