a 标签嵌套问题解决方案

江河/ 2023年03月27日/ CSS教程/ 浏览 1350

在开发实践中,经常会遇到 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>


每个方法都有一些副作用,开发实践中还需要看实际需求变通选择。

发表评论

暂无评论,抢个沙发...

客服 工单