javascript - 使 div 可点击

Question

感谢这里的出色工作。我正在尝试制作 div(我的代码中的黄色 block )可点击的元素，以便每个 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>