Menu
I want to make this div click-able and want to use same href of inside <a> and want to keep link in inside <a> also (so if JS is disabled then link will be accessible).
<div id="example">
<p> some text </p>
<img src="example.jpg />
<a href="http://stackoverflow.com"> link </link>
</div>
I mean i need like this.
<div id="example" href="http://stackoverflow.com">
<p> some text </p>
<img src="example.jpg />
<a href="http://stackoverflow.com"> link </link>
</div>
336
Create CSSSet the position to "absolute" for the inner <a> tag. Use the z-index property to place the link above all the other elements in the div.
We simply add the onlcick event and add a location to it. Then, additionally and optionally, we add a cursor: pointer to indicate to the user the div is clickable. This will make the whole div clickable.
Adding role=“button” will make an element appear as a button control to a screen reader. This role can be used in combination with the aria-pressed attribute to create toggle buttons.
Something like this should do
$('#example').click(function() {
window.location.href = $('a', this).attr('href');
});
I cannot reply to the above conversation yet because I am new here, but I just wanted to say that you do not need to return false from this function. What that does is prevent the default behavior of the event from happening (which, in the case of clicking a div is nothing) and prevent the event from propagating up to the next element in the DOM hierarchy.
It is unlikely that either of these are necessary for this case. Additionally, if you do need these behaviors, you can get them separately and more clearly like so:
// note that the function will be passed an event object as
// its first argument.
$('#example').click(function(event) {
event.preventDefault(); // the first effect
event.stopPropagation(); // the second
window.location.href = $('a', this).attr('href');
});
Again, I don't think either approach is necessary in this case, but it is important to understand how they work, because you will need one or both of them frequently.
33
<html>
<body>
<div onclick="window.location.href = this.getElementsByTagName('a')[0].href;">
<p>some text</p>
<a href="http://www.google.co.in/">link</a>
</div>
</body>
</html>
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
