如何实现点击商品图片/盒子跳转至产品详情页？

方法1：仅让图片可点击跳转 #

直接用 <a> 标签包裹商品图片，将 href 属性设置为对应商品的详情页URL即可。

修改后的单商品代码示例：

<div class="box">
    <div class="image">
        <!-- 用a标签包裹图片，href指向对应详情页 -->
        <a href="hoodie-detail.html">
            <img src="Products/bb.hoodie.png" width="50%" alt="MEDIUM FIT B HOODIE">
        </a>
        <div class="icons">
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="cart-btn">add to cart</a>
            <a href="#" class="fas fa-heart"></a>
        </div>
    </div>
    <div class="content">
        <h3>MEDIUM FIT B HOODIE</h3>
        <div class="price">1.225€ <span></span></div>
    </div>
</div>

方法2：让整个商品卡片可点击跳转 #

如果希望用户点击商品卡片的任意区域（图片、标题、价格等）都能跳转到详情页，可以用 <a> 标签包裹整个 .box 容器。

修改后的单商品代码示例：

<!-- 用a标签包裹整个商品卡片 -->
<a href="jacket-detail.html" class="product-link">
    <div class="box">
        <div class="image">
            <img src="Products/bbjacke.png" width="50%" alt="RACING JACKET">
            <div class="icons">
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="cart-btn">add to cart</a>
                <a href="#" class="fas fa-heart"></a>
            </div>
        </div>
        <div class="content">
            <h3>RACING JACKET</h3>
            <div class="price">3.100€ <span></span></div>
        </div>
    </div>
</a>

配套CSS调整（避免链接默认样式影响展示）：

.product-link {
    text-decoration: none; /* 去除链接下划线 */
    color: inherit; /* 继承父元素颜色，避免文字变色 */
    display: block; /* 让a标签包裹整个块级容器 */
}
/* 确保卡片内的子链接不受影响 */
.product-link .icons a {
    text-decoration: none;
    color: #000;
}

关键注意事项 #

• 需先创建每个商品对应的详情页HTML文件（如 hoodie-detail.html、jacket-detail.html），并将 href 设置为这些文件的正确路径。
• 每个商品的 href 要对应各自的详情页，不要统一使用同一个URL。
• 额外提示：你的代码中多个图片使用了相同的 id="box"，这不符合HTML规范（id必须唯一），建议移除重复id或改为class。

内容的提问来源于stack exchange，提问作者Yule