让 div 成为 JavaScript 中的链接？

Question

Everything I've searched for has shown about making a full div clickable, what I'm wondering is, is it possible to make a div in to a clickable link using just JavaScript and the div ID?

I have a layout of boxes and if a value in my database, I want PHP to echo some values in to JavaScript and say if this box is taken, give this div (boxID) the link that relates to it from the database. Only, there aren't going to be links on every div, as some won't exist in the database.

I suppose the alternative to this is wrapping each div in a <a> tag and an if exists statement?

Answer 1

In pure JS:

document.getElementById('your-div').addEventListener('click', function() {
    location.href = 'http://your-url.com'
}, false);

By jQuery

$('#your-div').on('click', function() {
    location.href = 'http://your-url.com'    
});

Answer 2

you can easily make it so that when you click your div you go to another page, like this (using jQuery)

$('#myId').click(function () {
    window.location = 'newurl.php';
});

Answer 3

在 html5 中你可以这样做：

<a href="link"><div>test</div></a>

Answer 4

This solution is for html <= 4. For html5, please read @Spencer solution.

Since the javascript is probably not what you want (waiting for extra comments), here's a example of how to do this in pure html/css. An anchor tag that fills completely a div, making that div clickable.

html:

<div>
  <a href = "http://whatever.com/">
  </a>
</div>

css:

div {
    width: 200px;
    height: 200px;
    position: relative;
    background-color: red;
}
a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 255, 0, 0.5);
}

Demo in jsfiddle (background-color added for demonstration purposes):

http://jsfiddle.net/Gx3f5/