我有一个<div>块与一些花哨的视觉内容,我不想改变。我想让它成为一个可点击的链接。

我正在寻找类似于<a href="…"><div>…</div></a>,但这是有效的XHTML 1.1。


当前回答

你可以使用href标签环绕元素,或者你可以使用jquery和使用

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});

其他回答

实际上你现在需要包括JavaScript代码, 请查看本教程。

但有一个棘手的方法来实现这个使用CSS代码 你必须在你的div标签内嵌套一个锚标签,你必须应用这个属性,

display:block;

当你这样做了,它将使整个宽度区域可点击(但在锚标签的高度内),如果你想覆盖整个div区域,你必须将锚标签的高度设置为div标签的高度,例如:

height:60px;

这将使整个区域可点击,然后你可以应用text-indent:-9999px到锚标签来实现目标。

这是非常棘手和简单的,它只是用CSS代码创建的。

这里有一个例子:http://jsfiddle.net/hbirjand/RG8wW/

需要一点javascript。 但是,你的div是可点击的。

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

我来这里是希望能找到比我更好的解决办法,但这里提供的办法我一个都不喜欢。我想你们有些人误解了这个问题。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

这是一个古老的问题,但我想我应该回答它,因为这里的每个人都有一些疯狂的解决方案。其实非常非常简单……

锚标记是这样工作的-

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

Sooo ...

<a href="whatever you want"> <div id="thediv" /> </a>

虽然我不确定这是否成立。如果这就是口头解决方案背后的原因,那么我道歉……

你不能让div本身成为一个链接,但是你可以让一个<a>标签作为一个块,与<div>具有相同的行为。

a {
    display: block;
}

然后你可以设置它的宽度和高度。