Make a div clickable

Question

Thanks for the great job here. I am trying to make divs ( yellow blocks in my code) clickable items so each div , on click will be linked to a different document.

Here is the code :

 .homepage-wrapper{ max-width: 1043px; margin-left: auto; margin-right: auto; } .homepage-top-category-container-title{ background-color: black; margin-bottom: 10px; padding: 15px 0 15px 0; } #homepage-top-category-container-title{ color: orange; margin-left: 15px; } .homepage-top-category-container-list{ display: flex; flex-wrap:wrap; width: auto; height: auto; } .homepage-top-category-container-list > div { margin-left: 15px; margin-bottom: 15px; } .homepage-top-category-container-item{ display: block; float: none; width: auto; height:auto; border: solid 1px black; position: relative; border-radius: 3px; background-color: yellow; } #homepage-top-category-container-item-a{ width: 240px; height: 360px; } #homepage-top-category-container-item-b{ width: 240px; height: 360px; } #homepage-top-category-container-item-c{ width: 240px; height: 360px; } #homepage-top-category-container-item-d{ width: 240px; height: 360px; } .homepage-top-category-container-item-btn{ position:absolute; padding: 5px; left: 0; right: 0; bottom:0; background-color: red; } 

 <div class="homepage-wrapper"> <div class="homepage-top-category-container"> <div class="homepage-top-category-container-title"> <span id="homepage-top-category-container-title">Most popular aisles</span> </div> <div class="homepage-top-category-container-list"> <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-a"> block A <div class="homepage-top-category-container-item-btn"> button </div> </div> <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-b"> block B <div class="homepage-top-category-container-item-btn"> button </div> </div> <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-c"> block C <div class="homepage-top-category-container-item-btn"> button </div> </div> <div class="homepage-top-category-container-item" id="homepage-top-category-container-item-d"> block D <div class="homepage-top-category-container-item-btn"> button </div> </div> </div> </div> </div> 

I would appreciate any help from our community to help me solve this matter.

Answer 1

You can do something like this:

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

Answer 2

If you are trying to make a div clickable you could use Jquery to do something like this:

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

Where .myDiv is replace it with your div but keep the dot, and change the href to your link.

To do this without JS use this code:

 <a href="https://www.google.com"> <div class="test"> Test </div> </a>