HTML-如何使整个 DIV 成为一个超链接？

如何使整个 DIV成为一个可点击的超链接:

<div class="myclass" href="example.com">
<div>...</div>
<table><tr>..</tr></table>
....
</div>

每当有人鼠标悬停在我的类 DIV，我希望整个 DIV是一个可点击的超链接。

309213 次浏览

小开

You can put an <a> element inside the <div> and set it to display: block and height: 100%.

小开

Add an onclick to your DIV tag.

http://webdevjunk.com/coding/javascript/3/use-onclick-to-make-entire-div-or-other-html-object-into-a-link/

小开

最佳答案

You can add the onclick for JavaScript into the div.

<div onclick="location.href='newurl.html';">&nbsp;</div>

EDIT: for new window

<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;">&nbsp;</div>

小开

alternative would be javascript and forwarding via the onclick event

<div onclick="window.location.href='somewhere...';">...</div>

小开

You just need to specify the cursor as a pointer, not a hand, as pointer is now the standard, so, here's the example page code:

<div onclick="location.href='portable-display-stands.html';" id="smallbox">The content of the div here</div>

and the example CSS:

#smallbox {
cursor: pointer;
}

So the div is now a clickable element using 'onclick' and you've faked the hand cursor with the CSS...job done, works for me!

小开

This is a late answer, but this question appears highly on search results so it's worth answering properly.

Basically, you shouldn't be trying to make a div clickable, but rather make an anchor div-like by giving the <a> tag a display: block CSS attribute.

That way, your HTML remains semantically valid and you can inherit the typical browser behaviours for hyperlinks. It also works even if javascript is disabled / js resources don't load.

小开

Why don't you just do this

<a href="yoururl.html"><div>...</div></a>

That should work fine and will prompt the "clickable item" cursor change, which the aforementioned solution will not do.