如何將整個Div內容設置爲像HyperLink一樣可點擊？

Question

我正在使用ASP.net開發網站。我有以下的div佈局

<div class="mainrepeater"> 
    <div id="image" class="my-ad-repeater-image-box"/> 
    <div class="my-repeater-title"> 
      <asp:HyperLink ID="hlNavigation" runat="server" Text='<%# Eval("title") %>'   NavigateUrl='<%#Eval("ad_url") %>' Target="_blank"></asp:HyperLink></div> 
    <div class="my-repeater-content"></div> 
</div> 

我設置從一個數據源的HyperLink導航URL和萬物工作正常。但我希望所有div（mainrepeater）都是可點擊的而不是超鏈接。

那麼該如何實現呢？ 我需要使用JavaScript嗎？如果不是那樣會很好。

非常感謝。

Answer 1

CSS

.my-repeater-title { cursor: pointer; } 

JS

$(".my-repeater-title").click(function(){ 
    window.location.href = "http://example.com" 
}); 

Answer 2

您應該使用屬性數據 - *在你的js腳本檢索您的網址爲：

<div class="my-repeater-title" data-url="[url]"> 

並獲得在你的腳本上：

$(".my-repeater-title").on('click', function(){ 
    var target = $(this).data('url'); 
    window.location.href = target; 
}); 

建議不要將外部數據（如url）直接寫入js文件，而是通過js讀取html。

Answer 3

另一種可能的選擇是用<a>標籤包裝<div class="mainrepeater">。

但是，這僅適用於HTML5。 欲瞭解更多詳情，請查看這篇文章Is putting a div inside an anchor ever correct?

Answer 4

HTML

<a class="mainrepeater_link" href="http://example.com"> 
    <div class="mainrepeater"> ... </div> 
</a> 

CSS（如果只有一個目標HTML版本小於5）

.mainrepeater_link { display: block; } 

Answer 5

的三種可能解決方案浮現在腦海中

第一個想法：讓鏈接更大

如果鏈接是你div的唯一內容的大小，你可以添加以下的CSS，使其填補股利。

.my-repeater-title > a 
{ 
    display:block; 
    width:100%; 
    height:100%; 
} 

雖然您可能需要在.my-repeater-title上設置尺寸。沒有JS需要

設想二

交換div和鏈接。更改

<div class="my-repeater-title"> 
    <a href="...">...</a> 
</div> 

到

<a href="..."> 
    <div class="my-repeater-title"> 
    ... 
    </div> 
</a> 

我敢肯定，在ASP這也是有可能的。沒有JS要求要麼

第三個想法：使用Javascript

添加點擊處理程序的jQuery。這已經被其他人所建議，所以我不會複製他們的解決方案，我也不會再寫一個不同的解決方案。