a标签中嵌套a标签的解决办法
温馨提示：
本文最后更新于 2023年04月11日，已超过 381 天没有更新。若文章内的图片失效（无法正常加载），请留言反馈或直接联系我。
很多时候会遇到这样的需求场景，就是点击卡片需要a标签跳转，但是卡片里的按钮或者其他内容也需要跳转。直接使用两个a标签不能达到需求效果。
这时可以采用3种办法。
代码
<a href="#">
<div class="card">
<img src="img/tx.jpg" alt=""/>
<p>描述内容...</p>
<a class="btn" href="#">按钮</a>
</div>
</a> 第一种：不用a标签
最外层的卡片可以绑定点击事件，然后跳转。
<div onclick="card_warp(id)">
<div class="card">
<img src="img/tx.jpg" alt=""/>
<p>描述内容...</p>
<a class="btn" href="#">按钮</a>
</div>
</div>
//js
function card_warp(id){
location.href = url + "跳转html?id="+id;
} 第二种：用object嵌套a标签
<a href="#">
<div class="card">
<img src="img/tx.jpg" alt=""/>
<p>描述内容...</p>
<object>
<a class="btn" href="#">按钮</a>
</object>
</div>
</a> 第三种：外层a标签改为行内块级元素
即display:inline-block;设置height/width并设置为绝对定位将其放在里层a标签的位置，通过调整里层a标签及外层a的z-index大小，使得鼠标能正确选中a标签；
<a href="#" style="display:inline-block;position:absolute;height:50px;z-index:10;">
<div class="card">
<img src="img/tx.jpg" alt=""/>
<p>描述内容...</p>
<a class="btn" href="#">按钮</a>
</div>
</a> 更多情况下推荐第一种和第二种方式，这样浏览器解析的会更好。
正文到此结束
- 本文标签： 前端 Html css
- 本文链接： http://www.92cxy.cn/article/100
- 版权声明： 本文由王小东原创发布，转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
热门推荐
相关文章
该篇文章的评论功能已被站长关闭
