zoukankan      html  css  js  c++  java
  • 使用area标签实现标签的嵌套

    在项目中我们会碰到这种需求:即点击这个整个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;
                 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属性可以实现页面跳转,而且可以嵌套在任何元素里面(但是在最新版本的火狐浏览器里面不支持,仅支持谷歌浏览器)

  • 相关阅读:
    Django——form组件和ModelForm
    CDH hadoop的安装
    Vulnhub-靶机-PRIME: 1
    Vulnhub-靶机-SYMFONOS: 5
    sqlilab-Less-21-30-writeup
    Vulnhub-靶机-SYMFONOS: 4
    Vulnhub-靶机-SYMFONOS: 3
    基础汇总-sqlilab-Less-1-20
    sqlilab-Less-13-19 测试writeup
    sqlilab-Less-9-12 测试writeup
  • 原文地址:https://www.cnblogs.com/mmykdbc/p/8479585.html
Copyright © 2011-2022 走看看