在开发实践中，经常会遇到 a 标签嵌套的需求，常见的如：点击C区域跳转c网址，点击C区域中的D块跳转d网址。
如果，直接写成下面的样子：
<a href="https://www.zhuige.com" target="_blank">追格
<a href="https://www.baidu.com" target="_blank">百度</a>
</a>浏览器会解析成：
原因就是 HTML 协议规定：a标签不能嵌套a标签。
解决办法，就是变通一下。
一、使用 object 包裹 a
<a href="https://www.zhuige.com" target="_blank">追格
<object>
<a href="https://www.baidu.com" target="_blank">百度</a>
</object>
</a>二、内部的 a 标签，使用 div 或其它元素，然后使用 js 跳转
<body>
<a href="https://www.zhuige.com" target="_blank">追格
<div onclick="divonclick()">百度</div>
</a>
<script>
function divonclick() {
window.location.href = 'https://www.baidu.com';
return false;
}
</script>
</body>三、视觉错位，把内部的a标签放在外面，然后用css定位，视觉上看起来像是 a 标签嵌套了。
<head>
<style>
.a-outer {
display: block;
width: 100px;
height: 100px;
background-color: antiquewhite;
}
.a-inner {
position: relative;
top: -50px;
left: 20px;
}
</style>
</head>
<body>
<a class="a-outer" href="https://www.zhuige.com" target="_blank">追格</a>
<a class="a-inner" href="https://www.baidu.com" target="_blank">百度</a>
</body>每个方法都有一些副作用，开发实践中还需要看实际需求变通选择。
暂无评论，抢个沙发...