使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的情况下使用此代码：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;