How do you make a div tag into a link

Question

How do you make a div tag into a link. I would like my entire div to be clickable.

Answer 1

JS:

<div onclick="location.href='url'">content</div>

jQuery:

$("div").click(function(){
   window.location=$(this).find("a").attr("href"); return false;
});

Make sure to use cursor:pointer for these DIVs

Answer 2

If you're using HTML5, as pointed in this other question, you can put your div inside a:

<a href="http://www.google.com"><div>Some content here</div></a>

Preffer this method as it makes clear in your structure that all the content is clickable, and where it's pointing.

Answer 3

If you have to set your anchor tag inside the div, you can also use CSS to set the anchor to fill the div via display:block.

As such:

<div style="height: 80px"><a href="#" style="display: block">Text</a></div>

Now when the user floats their cursor in that div the anchor tag will fill the div.

Answer 4

So you want an element to be something it's not?

Generally speaking this isn't a good idea. If you need a link, use a link. Most of the time it's easier to just use the appropriate markup where it belongs.

That all said, sometimes you just have to break the rules. Now, the question doesn't have javascript, so I'm going to put the disclaimer here:

You can't have a <div> act as a link without either using a link (or equivalent, such as a <form> that only contains a submit button) or using JavaScript.

From here on out, this answer is going to assume that JavaScript is allowed, and furthermore that jQuery is being used (for brevity of example).

With that all said, lets dig into what makes a link a link.

---

Links are generally elements that you click on so that they navigate you to a new document.

It seems simple enough. Listen for a click event and change the location:

_{Don't do this}

$('.link').on('click', function () {
  window.location = 'http://example.com';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link">Fake Link</div>

There you have it, the <div> is now a link. Wait...what's that? What about accessibility? Oh right, screen readers and users of assistive technology won't be able to click on the link, especially if they're only using the keyboard.

Fixing that's pretty simple, let's allow keyboard only users to focus the <div>, and trigger the click event when they press Enter:

_{Don't do this either}

$('.link').on({
  'click': function () {
    window.location = 'http://example.com';
  },
  'keydown': function (e) {
    if (e.which === 13) {
      $(this).trigger('click');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link" tabindex="0">Fake Link</div>

Again, there you have it, this <div> is now a link. Wait...again? Still accessibility problems? Oh ok, so it turns out that the assistive technology doesn't know that the <div> is a link yet, so even though you can get there via keyboard, users aren't being told what to do with it.

Fortunately, there's an attribute that can be used to override an HTML element's default role, so that screen readers and the like know how to categorize customized elements, like our <div> here. The attribute is of course the [role] attribute, and it nicely tells screen readers that our <div> is a link:

_{Ugh, this is getting worse every minute}

$('[role="link"]').on({
  'click': function () {
    window.location = 'http://example.com';
  },
  'keydown': function (e) {
    if (e.which === 13) {
      $(this).trigger('click');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="link" tabindex="0">Fake Link</div>

Finally, our <div> is a lin---oh now the other devs are complaining. What now?

Ok, so the devs don't like the code. They tried to preventDefault on the event, and it just keeps working. That's easy to fix:

_{I warned you this was bad}

$(document).on({
  'click': function (e) {
    if (!e.isDefaultPrevented()) {
      window.location = 'http://example.com';
    }
  },
  'keydown': function (e) {
    if (e.which === 13 && !e.isDefaultPrevented()) {
      $(this).trigger('click');
    }
  }
}, '[role="link"]');

$('[aria-disabled="true"]').on('click', function (e) {
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="link" tabindex="0">Fake Link</div>
<div role="link" aria-disabled="true" tabindex="0">Fake disabled link</div>

There we have it---THERE'S MORE? What else don't I know? Tell me everything NOW so that I can fix it!

• Ok, so there's no way to specify target. We can fix that by updating to window.open.
• Click events and keyboard events are ignoring Ctrl, Alt, and Shift keys. That's easy enough, just need to check those values on the event object.
• There's no way to specify contextual data. Let's just add some [data-*] attributes, and call it a day with that one.
• The click event isn't obeying the mouse button that's being used, middle mouse should open in a new tab, right mouse shouldn't be triggering the event. Easy enough, just add some more checks to the event listeners.
• The styles look weird. WELL OF COURSE THE STYLES ARE WEIRD, IT'S A <DIV> NOT AN ANCHOR!

well, I'll address the first four issues, and NO MORE. I've had it with this stupid custom element garbage. I should have just used an <a> element from the beginning.

_{Told you so}

$(document).on({
  'click': function (e) {
    var target,
        href;
    if (!e.isDefaultPrevented() && (e.which === 1 || e.which === 2)) {
      target = $(this).data('target') || '_self';
      href = $(this).data('href');
      if (e.ctrlKey || e.shiftKey || e.which === 2) {
        target = '_blank'; //close enough
      }
      open(href, target);
    }
  },
  'keydown': function (e) {
    if (e.which === 13 && !e.isDefaultPrevented()) {
      $(this).trigger({
        type: 'click',
        ctrlKey: e.ctrlKey,
        altKey: e.altKey,
        shiftKey: e.shiftKey
      });
    }
  }
}, '[role="link"]');

$('[aria-disabled="true"]').on('click', function (e) {
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="link" tabindex="0" data-href="http://example.com/">Fake Link</div>
<div role="link" tabindex="0" data-href="http://example.com/" data-target="_blank">Fake Link With Target</div>
<div role="link" aria-disabled="true" tabindex="0" data-href="http://example.com/">Fake disabled link</div>

_{Note that stack snippets won't open popup windows because of how they're sandboxed.}

That's it. That's the end of this rabbit hole. All of that craziness when you could have simply had:

<a href="http://example.com/">
    ...your markup here...
</a>

The code I posted here probably has problems. It probably has bugs that even I don't realize as of yet. Trying to duplicate what browsers give you for free is tough. There are so many nuances that are easy to overlook that it's simply not worth trying to emulate it 99% of the time.

Answer 5

DON'T DO IT.

• If you want a link, wrap the content in the proper <A>NCHOR</a>.
• If you want to turn the <DIV> into a link, use "Javascript" to wrap the <DIV> inside an <A>NCHOR</A>
• If you want to perform some action when clicking the <DIV> use the onclick event handler... and don't call it a "link".

Answer 6

<div style="cursor:pointer" onclick="document.location='http://www.google.com'">Content Goes Here</div>

Answer 7

<div style="cursor:pointer;" onclick="document.location='http://www.google.com'">Foo</div>

Answer 8

You can make the entire DIV function as a link by adding an onclick="window.location='TARGET URL'" and by setting its style to "cursor:pointer". But it's often a bad idea to do this because search engines won't be able to follow the resulting link, readers won't be able to open in tabs or copy the link location, etc. Instead, you can create a regular anchor tag and then set its style to display:block , and then style this as you would a DIV.

Answer 9

You could use Javascript to achieve this effect. If you use a framework this sort of thing becomes quite simple. Here is an example in jQuery:

$('div#id').click(function (e) {
  // Do whatever you want
});

This solution has the distinct advantage of keeping the logic not in your markup.

Answer 10

Keep in mind that search spiders don't index JS code. So, if you put your URL inside JS code and make sure to also include it inside a traditional HTML link elsewhere on the page.

That is, if you want the linked pages to be indexed by Google, etc.