怎么把div標簽變成鏈接

Question

你如何將一個 div 標簽變成一個鏈接。 我希望我的整個 div 都可以點擊。

Answer 1

JS：

<div onclick="location.href='url'">content</div>

jQuery：

$("div").click(function(){
   window.location=$(this).find("a").attr("href"); return false;
});

確保對這些 DIV 使用cursor:pointer

Answer 2

如果您使用的是 HTML5，如另一個問題中所指出的，您可以將div放在a ：

<a href="http://www.google.com"><div>Some content here</div></a>

首選此方法，因為它在您的結構中清楚地表明所有內容都是可點擊的，以及它指向的位置。

Answer 3

如果必須在 div 內設置錨標記，也可以使用 CSS 設置錨以通過 display:block 填充 div。

像這樣：

<div style="height: 80px"><a href="#" style="display: block">Text</a></div>

現在，當用戶將光標懸停在該 div 中時，錨標記將填充該 div。

Answer 4

所以你想讓一個元素成為它不是的東西？

一般來說，這不是一個好主意。 如果您需要鏈接，請使用鏈接。 大多數情況下，在它所屬的地方使用適當的標記會更容易。

話雖如此，有時你只需要打破規則。 現在，這個問題沒有javascript ，所以我要在這里放免責聲明：

如果不使用鏈接（或等效項，例如僅包含提交按鈕的<form> ）或使用 JavaScript，則不能將<div>用作鏈接。

從現在開始，這個答案將假定 JavaScript 是允許的，而且正在使用 jQuery（為了簡單起見）。

說了這么多，讓我們深入研究是什么使鏈接成為鏈接。

---

鏈接通常是您單擊的元素，以便它們將您導航到新文檔。

這似乎很簡單。 偵聽單擊事件並更改位置：

_{不要這樣做}

 $('.link').on('click', function () { window.location = 'http://example.com'; });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="link">Fake Link</div>

有了它， <div>現在是一個鏈接。 等等……那是什么？ 可訪問性怎么樣？ 哦對了，屏幕閱讀器和輔助技術用戶將無法點擊鏈接，尤其是當他們只使用鍵盤時。

解決這個問題非常簡單，讓我們只允許鍵盤用戶聚焦<div> ，並在他們按下Enter時觸發 click 事件：

_{也不要這樣做}

 $('.link').on({ 'click': function () { window.location = 'http://example.com'; }, 'keydown': function (e) { if (e.which === 13) { $(this).trigger('click'); } } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="link" tabindex="0">Fake Link</div>

同樣，你已經知道了，這個<div>現在是一個鏈接。 等等……又來了？ 仍然存在可訪問性問題？ 哦，好吧，原來輔助技術還不知道<div>是一個鏈接，所以即使您可以通過鍵盤到達那里，也不會告訴用戶如何使用它。

幸運的是，有一個屬性可用於覆蓋 HTML 元素的默認角色，以便屏幕閱讀器等了解如何對自定義元素進行分類，例如此處的<div> 。 該屬性當然是[role]屬性，它很好地告訴屏幕閱讀器我們的<div>是一個鏈接：

_{呃，這每分鍾都在變得更糟}

 $('[role="link"]').on({ 'click': function () { window.location = 'http://example.com'; }, 'keydown': function (e) { if (e.which === 13) { $(this).trigger('click'); } } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div role="link" tabindex="0">Fake Link</div>

最后，我們的<div>是一個 lin --- 哦，現在其他開發人員都在抱怨。 現在怎么辦？

好的，所以開發人員不喜歡代碼。 他們試圖在事件中阻止preventDefault ，並且它一直在工作。 這很容易解決：

_{我警告過你這很糟糕}

 $(document).on({ 'click': function (e) { if (!e.isDefaultPrevented()) { window.location = 'http://example.com'; } }, 'keydown': function (e) { if (e.which === 13 && !e.isDefaultPrevented()) { $(this).trigger('click'); } } }, '[role="link"]'); $('[aria-disabled="true"]').on('click', function (e) { e.preventDefault(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div role="link" tabindex="0">Fake Link</div> <div role="link" aria-disabled="true" tabindex="0">Fake disabled link</div>

我們有它——還有更多？ 還有什么我不知道的？ 告訴我現在的一切，這樣我可以修復它！

• 好的，所以沒有辦法指定目標。 我們可以通過更新到window.open來解決這個問題。
• 單擊事件和鍵盤事件會忽略Ctrl 、 Alt和Shift鍵。 這很簡單，只需要檢查事件對象上的那些值。
• 無法指定上下文數據。 讓我們添加一些[data-*]屬性，然后就用那個屬性結束吧。
• 單擊事件不服從正在使用的鼠標按鈕，鼠標中鍵應在新選項卡中打開，鼠標右鍵不應觸發該事件。 很簡單，只需向事件偵聽器添加更多檢查即可。
• 樣式看起來很奇怪。 當然，樣式很奇怪，它是<DIV>不是錨！

好吧，我將解決前四個問題，不再贅述。 我已經用過這個愚蠢的自定義元素垃圾了。 我應該從一開始就使用<a>元素。

_{告訴過你了}

 $(document).on({ 'click': function (e) { var target, href; if (!e.isDefaultPrevented() && (e.which === 1 || e.which === 2)) { target = $(this).data('target') || '_self'; href = $(this).data('href'); if (e.ctrlKey || e.shiftKey || e.which === 2) { target = '_blank'; //close enough } open(href, target); } }, 'keydown': function (e) { if (e.which === 13 && !e.isDefaultPrevented()) { $(this).trigger({ type: 'click', ctrlKey: e.ctrlKey, altKey: e.altKey, shiftKey: e.shiftKey }); } } }, '[role="link"]'); $('[aria-disabled="true"]').on('click', function (e) { e.preventDefault(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div role="link" tabindex="0" data-href="http://example.com/">Fake Link</div> <div role="link" tabindex="0" data-href="http://example.com/" data-target="_blank">Fake Link With Target</div> <div role="link" aria-disabled="true" tabindex="0" data-href="http://example.com/">Fake disabled link</div>

_{請注意，堆棧片段不會打開彈出窗口，因為它們是如何被沙盒化的。}

就是這樣。 這就是這個兔子洞的盡頭。 當您本可以簡單地擁有所有這些瘋狂時：

 <a href="http://example.com/"> ...your markup here... </a>

我在這里發布的代碼可能有問題。 它可能有一些錯誤，甚至我還沒有意識到。 試圖復制瀏覽器免費提供給你的東西是很困難的。 有很多細微差別很容易被忽視，以至於在 99% 的情況下都不值得嘗試模仿它。

Answer 5

不要這樣做。

• 如果您需要鏈接，請將內容包裝在適當的<A>NCHOR</a> 。
• 如果要將<DIV>轉換為鏈接，請使用“Javascript”將<DIV>包裹在<A>NCHOR</A>
• 如果您想在單擊<DIV>時執行某些操作，請使用onclick事件處理程序...並且不要將其稱為“鏈接”。

Answer 6

<div style="cursor:pointer" onclick="document.location='http://www.google.com'">Content Goes Here</div>

Answer 7

<div style="cursor:pointer;" onclick="document.location='http://www.google.com'">Foo</div>

Answer 8

您可以通過添加 onclick="window.location='TARGET URL'" 並將其樣式設置為 "cursor:pointer" 來使整個 DIV 函數成為一個鏈接。 但這樣做通常是一個壞主意，因為搜索引擎將無法跟蹤生成的鏈接，讀者將無法在選項卡中打開或復制鏈接位置等。相反，您可以創建一個常規的錨標記然后將其樣式設置為 display:block ，然后將其設置為 DIV 樣式。

Answer 9

您可以使用 Javascript 來實現此效果。 如果你使用一個框架，這種事情就變得很簡單了。 這是jQuery 中的一個示例：

$('div#id').click(function (e) {
  // Do whatever you want
});

此解決方案具有將邏輯保留在標記中的獨特優勢。

Answer 10

請記住，搜索蜘蛛不會索引 JS 代碼。 因此，如果您將URL放在 JS 代碼中，並確保將其包含在頁面其他位置的傳統 HTML 鏈接中。

也就是說，如果您希望鏈接的頁面被 Google 等編入索引。