Menu
How do you make a div tag into a link. I would like my entire div to be clickable.
853
You can't make the div a link itself, but you can make an <a> tag act as a block , the same behaviour a <div> has. You can then set the width and height on it. However, this doesn't make a 'div' into a link. It makes a link into a block element.
You can put an <a> element inside the <div> and set it to display: block and height: 100% . @Teddy: Adding position:relative; to the div and then position: absolute; height: 100%; to the a as well... should make the entire area of the div is active. You can put all of that content inside the <a> .
By prepending your href with # , you can target an HTML element with a specific id attribute. For example, <a href="#footer"> will navigate to the <div id="footer"> within the same HTML document. This type of href is often used to navigate back to the top of the page.
You can put an anchor tag inside of the divs... make it the last element in the divs, and style it to be display block, and to fill up 100% width and height (you may need to specify the height). Then have it "position: absolute;" and have the outermost div "position: relative;" ...
JS:
<div onclick="location.href='url'">content</div>
jQuery:
$("div").click(function(){
window.location=$(this).find("a").attr("href"); return false;
});
Make sure to use cursor:pointer for these DIVs
123
If you're using HTML5, as pointed in this other question, you can put your div inside a:
<a href="http://www.google.com"><div>Some content here</div></a>
Preffer this method as it makes clear in your structure that all the content is clickable, and where it's pointing.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
