Make a div into a link

Question

I have a

block with some fancy visual content that I don\'t want to change. I want to make it a clickable link.

I\'m looking for something l

相关标签:

Answer 1

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.

a {
    display: block;
}

You can then set the width and height on it.

Answer 2

The cleanest way would be to use jQuery with the data-tags introduced in HTML. With this solution you can create a link on every tag you want. First define the tag (e.g. div) with a data-link tag:

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>

Now you can style the div however you want. And you have to create also the style for the "link"-alike behavior:

[data-link] {
  cursor: pointer;
}

And at last put this jQuery call to the page:

$(document).ready(function() {
  $("[data-link]").click(function() {
    window.location.href = $(this).attr("data-link");
    return false;
  });
});

With this code jQuery applys a click listener to every tag on the page which has a "data-link" attribute and redirects to the URL which is in the data-link attribute.

Answer 3

You can give a link to your div by following method:

<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
    cursor:pointer;
    width:200px;
    height:200px;
    background-color:#FF0000;
    color:#fff;
    text-align:center;
    font:13px/17px Arial, Helvetica, sans-serif;
    }
</style>

Answer 4

Not sure if this is valid but it worked for me.

The code :

<div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
  <p style='display:inline;color:#ffffff;float:left;'> Whatever </p>     
  <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
</div>

Answer 5

My smarty pants answer:

"Evasive answer to: "How to make block level element a hyperlink and validate in XHTML 1.1"

Just use HTML5 DOCTYPE DTD."

Didn't actually hold true for ie7

onclick="location.href='page.html';"

Works IE7-9, Chrome, Safari, Firefox,

Answer 6

you could also try by wrapping an anchor, then turning its height and width to be the same with its parent. This works for me perfectly.

<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>