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

另一种可能的选择是用<div class="mainrepeater">标记包裹<a>。

但这仅适用于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即可填充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中添加一个click-handler。这已经被其他人建议了，所以我不会复制他们的解决方案，我也不会费心去写另一个。

如何将整个Div内容设置为像HyperLink一样可点击？

5 个答案: