在开发实践中,经常会遇到 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>
每个方法都有一些副作用,开发实践中还需要看实际需求变通选择。
暂无评论,抢个沙发...