CODEWITHSUNDEEP
javascripthtmlhyperlink
kippi
kippi

Reputation: 69

div as an hyperlink

I got a couple of divs that I want as a hyperlink. To make one div as a hyperlink isn't a problem and it works fine, but when I make 2 or more divs as a hyperlink they all link to the same place (page1.html) as the first div. 

<div class="boxday1"> <a href="page1.html"/></div>
<div class="boxday2"> <a href="page2.html"/></div>
<div class="boxday3"> <a href="page3.html"/></div>
<div class="boxday4"> <a href="page4.html"/></div>
<div class="boxday5"> <a href="page5.html"/></div>
<div class="boxday6"> <a href="page6.html"/></div>

js 

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

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

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

And so on...

Any suggestions on what I should do. Appreciate all help

Upvotes: 0

Views: 64

Answers (2)

krsoni
krsoni

Reputation: 639

  1. The way you closed the <a href=" /> tags is for closing the tags that don't have a closing tag like <img />, <br />, etc. but not for which a closing tag is already defined like <a> </a> in your case.
  2. You don't have to put every event in different $(document).ready().

Upvotes: 0

Arman Bhuiyan
Arman Bhuiyan

Reputation: 86

Check this out:-

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $(".boxday1").click(function() {
      window.location = $(this).find("a").attr("href");
      return false;
  });
  $(".boxday2").click(function() {
      window.location = $(this).find("a").attr("href");
      return false;
  });
  $(".boxday3").click(function() {
      window.location = $(this).find("a").attr("href");
      return false;
  });
});
</script>
</head>

<body>
  <div class="boxday1"> <a href="page1.html">page1</a></div>
  <div class="boxday2"> <a href="page2.html">page2</a></div>
  <div class="boxday3"> <a href="page3.html">page3</a></div>
</body>

Until you put the closing anchor tag it will refer to the same first link.

Upvotes: 1

Related Questions