原创

a标签中嵌套a标签的解决办法

温馨提示:
本文最后更新于 2023年04月11日,已超过 237 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我

很多时候会遇到这样的需求场景,就是点击卡片需要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>

更多情况下推荐第一种和第二种方式,这样浏览器解析的会更好。

正文到此结束
该篇文章的评论功能已被站长关闭
本文目录