如何設置整個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

您應該使用data- *屬性來檢索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。 有關更多詳細信息，請檢查此帖子將div放入錨點是否正確？

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以使其填充div。

.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中添加點擊處理程序。 其他人已經建議過這一點，所以我不會復制他們的解決方案，也不會費心編寫其他解決方案。