如何设置整个Div目录像HyperLink一样可点击？

Question

I am developing website by using ASP.net. I have following div layout

 <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>

I am setting the HyperLink navigate URL from a datasource and everythings works fine. But I want all div(mainrepeater) to be clickable instead of the hyperlink.

So how to achieve that?. Do I need to use javascript? If not that would be great.

Thank you very much.

Answer 1

CSS

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

JS

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

Answer 2

You should use attribute data-* to retrieve your url on your js script as:

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

And get on your script:

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

It's recommended to not write external data like url directly to the js file, but to fetch on html by js.

Answer 3

Another possible option is to wrap <div class="mainrepeater"> with <a> tag.

But this is correct only for HTML5. For more details please check this post 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 (only if you target a HTML version less than 5.)

.mainrepeater_link { display: block; }

Answer 5

Three possible solutions come to mind

First idea: Make the size of the link bigger

If the link is the only content of your div, you can just add the following CSS to make it fill the div.

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

You might need to set dimensions on .my-repeater-title though. No JS required

Second idea

Swap the div and the link. Change

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

to

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

I'm sure that's possible in ASP too. No JS required either

Third idea: Javascript

Add a click-handler in jquery. This has already been suggested by others, so I won't copy their solution and I won't bother writing a different one.