讓 div 成為 JavaScript 中的鏈接？

Question

我搜索的所有內容都顯示了有關使完整 div 可點擊的信息，我想知道的是，是否可以僅使用 JavaScript 和 div ID 將 div 放入可點擊鏈接中？

我有一個盒子的布局，如果我的數據庫中有一個值，我希望 PHP 將一些值回顯到 JavaScript，並說如果這個盒子被占用，給這個 div (boxID) 與數據庫相關的鏈接。 只是，不會在每個 div 上都有鏈接，因為數據庫中不存在一些鏈接。

我想這個的替代方法是將每個 div 包裝在<a>標記和 if exists 語句中？

Answer 1

在純 JS 中：

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

通過 jQuery

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

Answer 2

你可以很容易地做到這一點，當你點擊你的 div 時，你會轉到另一個頁面，就像這樣（使用 jQuery）

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

Answer 3

在 html5 中你可以這樣做：

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

Answer 4

此解決方案適用於 html <= 4。對於 html5，請閱讀@Spencer 解決方案。

由於 javascript 可能不是您想要的（等待額外的評論），這里有一個如何在純 html/css 中執行此操作的示例。 一個完全填充 div 的錨標記，使該 div 可點擊。

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);
}

jsfiddle 中的演示（為演示目的添加了背景顏色）：

http://jsfiddle.net/Gx3f5/