乐鱼电竞

    • 教育行业A股IPO第一股（股票代码 003032）

    全国咨询/投诉热线：400-618-4000

    a标签嵌套解决方案

    更新时间:2018年12月13日15时57分 来源:乐鱼播客 浏览次数:

    问题

    　　
    在实际网页布局之中，我们有时候需要一整块点击区域中间还要有部分按钮点击，也就是需要a标签嵌套a标签，如下：

    　　<!-- a标签进行嵌套的时候 --><a href="#haorooms">outerA    <a href="#haoroomsinner">innerA</a></a>　

    但是我们会发现，这种嵌套，浏览器会直接错误解析，解析结果如下：

    　　<!-- 而浏览器则会解析成 -- ><a href="#haorooms">outerA</a><a href="#haoroomsinner">innerA</a>　　

    那么针对这种情况如何解决呢?

    方案一：使用object标签进行嵌套　　

    例如我么如下写，就不会错误解析了!

    　　<a href="#haorooms">    outerA    <object><a href="#haoroomsinner">innerA</a></object></a>　

    这种写法的典型应用最多的是列表整个需要点击，列表里面有电话号码需要单独点击拨打!

    　　<a class="haorooms_list" href="跳转页面">    列表内容    <object><a href="tel:694434565">拨打电话</a></object></a>

    方案二：使用定位方式　　

    这种方式是迫不得已的方式，思路就是我们不用嵌套。直接代码如下书写：

    　　<a href="#haorooms">outerA</a><a href="#haoroomsinner">innerA</a>　　

    外层的haorooms通过设置display:inline-block，以及绝对定位，将其放在里层a标签的位置。然后通过调整里层a标签及外层a的z-index大�。沟檬蟊昴苷费≈衋标签;
    　　
    这种方法的核心思想就是通过定位来模拟实现我们想要达到的效果!

    方案三：使用 HTML的 < area>< map>标签来实现　　

    记得在学校学校网页制作的时候，用的是dreamweaver，dreamweaver中可以使用图片热区来实现图片的点击效果。没错，我们可以使用热区来实现a标签的嵌套效果啊!

    area标签很久没有使用了，普及一下基础知识：　　

    area可以指定shape及coords。

    　　如果 shape 属性设置为 "rect"，则该值规定矩形左上角和右下角的坐标。(x1,y1,x2,y2)

    　　如果 shape 属性设置为 "circ"，则该值规定圆心的坐标和半径。(x,y,radius)

    　　如果 shape 属性设置为 "poly"，则该值规定多边形各顶点的值。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。(x1,y1,x2,y2,..,xn,yn)　　

    area和map要配合使用，可以在图片上面指定部分热区，也可以在列表中指定热区。
    　　
    假如我们运用area和map在列表中a标签内部指定热区，就可以实现类似我们上面a标签嵌套的效果了!
    　　
    还是上面的例子，我们可以如下书写：

    　　  <a href="#haorooms">        outerA          <map>            <area shape="rect" coords="0,0,200,21"href="haoroomsinner" >        </map>    </a>　　

    方案四：使用span等标签加js事件来代替a标签　　　

    当然我们也可以用span，标签等替代a标签，只不过要多写一些js跳转代码了，通过js来实现a标签所能实现的效果!

    作者：乐鱼播客前端与移动开发培训学院

    首发： http://web.itcast.cn

    0 分享到：
    和我们在线交谈！
    【网站地图】【sitemap】