Thread: Clickable Div Using Javascript, CSS, JQuery

Clickable Div

Few ways to make a div clickable described here.

Option 1: Using Javascript:

Code:

<div onclick="location.href='http://www.webcosmoforums.com';" style="cursor:pointer;">
some content here.
</div>

Option 2: Using CSS:

Code:

<div class="adiv"><a href="#">something here</a></div>
<style>
.adiv {
  width:500px;
  height:150px;
  border: solid #eee;
}

 .adiv a {
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
}

 .adiv a:hover {
  text-decoration:none;
  background-color: #ccc;
}
</style>

Option 3: JQuery:

Code:

<div class="clickable" url="http://www.webcosmoforums.com">
    something something
</div>
<script>
$("div.clickable").click(
function()
{
    window.location = $(this).attr("url");
    return false; //need this to prevent event bubbling
});
</script>