使用area标签实现标签的嵌套

最新推荐文章于 2021-05-11 10:55:47 发布

weixin_30412013

最新推荐文章于 2021-05-11 10:55:47 发布

阅读量104

点赞数

原文链接：http://www.cnblogs.com/mmykdbc/p/8479585.html

版权

在项目中我们会碰到这种需求：即点击这个整个a标签跳转到一个页面，点击a里面的某个a再跳转到另一个页面。有人会说，这还不简单，直接a标签嵌套a标签，可是事实如此吗，看代码：

<a href="#">clickOne<a href="#">clickTwo</a></a>

　　此时的节点结构是a嵌套这a，但是经过页面解析以后：

嵌套关系成了兄弟关系。这是因为a标签不能去嵌套a标签，所以浏览器会默认的把他们解析为兄弟节点的关系。

那怎么才能嵌套呢，这个时候我们的主角area标签就出场了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            position: relative;
        }

        span area {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>
<a href="./../details/six.html">
    clickOne
    <span>
        <area  href="./../tabindex/index.html" alt="test">
        clickTwo
    </span>
</a>
</body>
</html>

　　area标签的href属性可以实现页面跳转，而且可以嵌套在任何元素里面（但是在最新版本的火狐浏览器里面不支持，仅支持谷歌浏览器）

转载于:https://www.cnblogs.com/mmykdbc/p/8479585.html

weixin_30412013

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用area标签实现标签的嵌套

在项目中我们会碰到这种需求：即点击这个整个a标签跳转到一个页面，点击a里面的某个a再跳转到另一个页面。有人会说，这还不简单，直接a标签嵌套a标签，可是事实如此吗，看代码：<a href="#">clickOne<a href="#">clickTwo</a></a>　　此时的节点结构是a嵌套这a，但是经过页面解析以后：嵌套...
复制链接

扫一扫