javascript - How do you make the entire DIV clickable to go to another page? - Stack Overflow

admin管理员组

文章数量:1353924

Do not bind it to javascript "onclick".

It needs to be an anchor.

I know I can bind onclick to the div and make it window.location. However, then...the user cannot open a new tab by CONTROL+Clicking it.

I just want an <a> that fills up the entire div.

Do not bind it to javascript "onclick".

It needs to be an anchor.

I know I can bind onclick to the div and make it window.location. However, then...the user cannot open a new tab by CONTROL+Clicking it.

I just want an <a> that fills up the entire div.

• javascript
• css
• templates
• html

Share Improve this question Follow asked Dec 2, 2010 at 8:53 TIMEXTIMEX 273k367367 gold badges802802 silver badges1.1k1.1k bronze badges 4

• 1 Please elaborate. A DIV can have onclick, so you're doing something else wrong. Post some code. – David Hedlund Commented Dec 2, 2010 at 8:54
• Did HTML5 "href anywhere" go anywhere? – Thilo Commented Dec 2, 2010 at 8:56
• 1 Why don't you use anchor tag only. You can style it to not to have link effect – Chinmayee G Commented Dec 2, 2010 at 8:56
• 3 A lot of people have mented on ways to make anchors look like DIVs. If that's good enough from you, I think display: block is the most important property to keep in mind, as anchors are normally inline elements. – David Hedlund Commented Dec 2, 2010 at 9:01

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 11

Try setting the anchor to display as a block within your DIV and setting its height to 100%, like this:

<style>
  a { display: block; height: 100% }
  #test { width: 100px; height: 200px; background: red;  }
</style>


<div id='test'><a href='#'>...</a></div>

You can see a working example here: http://jsbin./ujoca3/2/edit

The semantic way to do it would be to have the anchor act like a div. Because you don't want anything else in the container there's no point in having a container.

<style>
    a.fakeDiv, a.fakeDiv:link, a.fakeDiv:hover, a.fakeDiv:active, a.fakeDiv:visited{
       display: block;
       text-decoration: none;
       color: Black;
       cursor: default;
       outline: none;
    }
</style>
<a class="fakeDiv">Content</a>

some html:

<div><a href="#"></a></div>

some css

yourdiv { position: relative; }
yourdiv a { position:absolute; left:0;right:0;top:0;bottom:0; }

<div>
  <a href="somepage.php" style="display: block; height:100%; width: 100%; margin: 0; padding: 0;"></a>
</div>

本文标签： javascriptHow do you make the entire DIV clickable to go to another pageStack Overflow