如何设计HTML卡片实现点击任意位置跳转对应链接打开新页面

方案1：调整HTML结构（更推荐，无需依赖JS，兼容性好） #

HTML5支持<a>标签包裹块级元素，直接将整个卡片内容套在跳转链接内即可，注意不要嵌套<a>标签，把卡片内部原有的链接替换为普通文本标签即可。

调整后的HTML示例（以第一张卡片为例） #

<!-- 把原外层div替换为a标签，href填跳转地址，保留原有card类名，删除内部嵌套的a标签 -->
<a href="breathing-tool.html" class="card card1">
  <br>
  <span>Rhythmic Breathing Guide</span>
  <br>
  <br>
  <p> Proper breathing helps to reduce anxiety by increasing the flow of oxygen throughout the body. 
    <br> <br>
    This excercise is designed to deliver the best timing of deep breathing suggested by health specialists.
    <br> <br>
    Practice this for 5 to 10 minutes daily. 
  </p>
</a>

补充CSS规则清除a标签默认样式 #

在原有CSS代码中新增以下属性：

.card {
  /* 保留原有的所有card样式，新增下面两个属性即可 */
  text-decoration: none;
  color: inherit; /* 也可以直接填写你需要的文字色值 */
}

剩余两张卡片按照同样逻辑修改即可，修改完成后点击卡片任意位置都可以直接跳转，也不会出现默认的蓝色链接下划线问题。

方案2：不修改原有HTML，通过JS实现跳转 #

如果不想调整原有HTML结构，可以新增一段JS代码监听卡片点击事件实现跳转：

document.querySelectorAll('.card').forEach(card => {
  card.addEventListener('click', () => {
    // 读取卡片内部a标签的跳转地址
    const targetUrl = card.querySelector('a').getAttribute('href');
    window.location.href = targetUrl;
  })
})

该方案无需改动现有代码结构，但需要依赖JS运行，稳定性不如方案1。

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