如何將div標籤製作爲鏈接

2

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

來源

2009-11-06 02:45:18 Rob

+1

考慮給你的答案增加一個解釋，以幫助保持學習資源而不僅僅是答案。 – Jon 2012-08-29 00:24:52

14

JS：

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

的jQuery：

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

確保通過添加使用cursor:pointer對這些div

來源

2009-11-06 02:45:56 3zzy

+2

如果我沒理解錯jQuery的樣品中，HTML必須構建這樣：

Your link text

– 2009-11-06 02:49:55

+0

是的，這就是大概一個更好的方式來做到這一點。我只是把它作爲替代品發佈。 – 3zzy 2009-11-06 06:08:02

2

可以使整個DIV功能爲紐帶onclick =「window.location ='TARGET URL'」並將其樣式設置爲「光標：指針」。但是，這樣做通常是一個壞主意，因爲搜索引擎將無法遵循所產生的鏈接，讀者將無法在標籤中打開或複製鏈接位置等。相反，您可以創建常規錨標籤然後將其樣式設置爲顯示：塊，然後像對待DIV一樣對其進行設置。

來源

2009-11-06 02:46:24

5

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

來源

2009-11-06 02:46:47

7

不要這樣做。

如果您想要鏈接，請將內容包裝在合適的<A>NCHOR</a>中。
如果你想將<DIV>變成鏈接，可使用「使用Javascript」來包裹<DIV>內的<A>NCHOR</A>
如果要進行點擊<DIV>使用onclick事件處理程序時的一些動作......而不要」稱它爲「鏈接」。

來源

2009-11-06 02:50:27 chakrit

2

您可以使用Javascript來達到此效果。如果你使用框架，這種事情變得非常簡單。這裏是jQuery一個例子：

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

該解決方案具有保持邏輯不是在你標記的明顯優勢。

來源

2009-11-06 02:52:56

11

如果您必須在div中設置您的錨標記，您還可以使用CSS設置通過display：block填充div的錨點。

這樣：

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

現在，當用戶自己漂浮在光標該div定位標記將填補股利。

來源

2009-11-06 03:08:59

+1

在Firefox 3.5和IE8中，我必須添加「height：100％;」到錨標籤，它佔據整個DIV高度。 Javascript解決方案的好選擇。 – 2009-11-06 04:41:50

+1

這是最簡單和最友好的答案 – 2013-10-24 16:50:19

10

如果您使用HTML5，如指向this other問題，你可以把你的div內a：

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

Preffer這種方法，因爲它使你的結構，所有的內容可點擊明確，它指向的地方。

來源

2014-03-19 18:27:49

6

所以你想要一個元素是不是？

一般來說這不是一個好主意。如果您需要鏈接，請使用鏈接。大多數情況下，只需使用適當的標記即可。

這一切說，有時你必須打破規則。現在的問題沒有javascript，所以我打算把這裏免責聲明：

你不能有一個<div>行爲爲紐帶，而不使用任何一個鏈接（或等價物，如<form>只包含一個提交按鈕）或使用JavaScript。

從這裏開始，這個答案會假設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>，並觸發時，他們按輸入單擊事件：

_{不要做到這一點無論}

$('.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>是林---哦，現在其他的開發者都在抱怨。現在怎麼辦？

好，所以開發者不喜歡的代碼。他們試圖在事件中嘗試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>

我們有它---還有更多？我還不知道什麼？告訴我一切NOW這樣我就可以修復它！

好吧，所以沒有辦法指定目標。我們可以通過更新到window.open來解決這個問題。
Click事件和鍵盤事件被忽略按Ctrl，Alt鍵，並移鍵。這很簡單，只需要檢查事件對象上的這些值。
無法指定上下文數據。我們只需添加一些[data-*]屬性，然後在那天調用它。
click事件不服從多數民衆贊成使用，鼠標應該在新標籤中打開鼠標鍵，鼠標右鍵應該不會觸發事件。很簡單，只需向事件偵聽器添加更多檢查即可。
風格看起來很奇怪。良好的課程風格是偉大的，這是一個<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％的時間都不值得嘗試模擬它。

來源

2015-08-25 01:11:42 zzzzBov

0

請記住，搜索蜘蛛不索引JS代碼。所以如果你把你的URL放入JS代碼中，一定要將它包含在頁面其他地方的傳統HTML鏈接中。也就是說，如果你想鏈接的頁面被谷歌索引等

來源

2017-04-16 16:52:36 sifr4

如何將div標籤製作爲鏈接

回答

相關問題