CODEWITHSUNDEEP
phphtmlcss
newbie129
newbie129

Reputation: 29

Where to add a URL for a clickable div (CSS)

I have a div object (a square box) and I made it clickable by creating this css style:

.clickable {
cursor: pointer;
}

Right now clicking on the box leads no where. Where do I put the URL to redirect the user? I have multiple boxes they all need to lead to a different URL, which is to be pulled from a database via PHP. but where do I add the URL since I don't have a tag?

Upvotes: 1

Views: 1702

Answers (2)

mayersdesign
mayersdesign

Reputation: 5310

UPDATE: On further research, prompted by comments below, this answer may not be optimal. It does work. It is still useful in certain situations, but since <a href="#"><div></div></a> is now valid html it is likely not necessary.

Additionally, remember links can be can be made display: block; which could also solve similar problems.

Just to be clear you did not make that div clickable by adding CSS. You made it "look like" it was clickable by changing the mouse-pointer when it hovers the div.

This jQuery snippet will take ant div that contains an actual link, and make the whole div (really) clickable:

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

Carry on using your CSS as well of course, as it provides visual indication that this is the case.

Upvotes: 2

Spholt
Spholt

Reputation: 4032

Rather than make the div clickable, nest it within an anchor tag:

<a href="http://google.com">
    <div></div>
</a>

This is semantically correct as of html5

https://davidwalsh.name/html5-elements-links

https://css-tricks.com/snippets/jquery/make-entire-div-clickable/

I will qualify my answer by saying that you should consider what the content of your div will be. Some markup and content may not be appropriate if you are making the entire block clickable (i.e. anchor tags, button elements, etc)

Upvotes: 4

Related Questions