如何将整个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。这已经被其他人所建议，所以我不会复制他们的解决方案，我也不会再写一个不同的解决方案。