使div可点击

Question

感谢您的出色工作。 我正在尝试使div（代码中的黄色块）可点击，因此单击时每个div都将链接到不同的文档。

这是代码：

 .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> 

我希望能得到我们社区的任何帮助，以帮助我解决此问题。

Answer 1

您可以执行以下操作：

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

Answer 2

如果您尝试使div可点击，则可以使用Jquery执行以下操作：

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

.myDiv替换为div的地方，但保留点，然后将href更改为链接。

要在没有JS的情况下使用此代码，请执行以下操作：

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