×

A标签能嵌套吗

作者:天空2017.12.21来源:Web前端之家浏览:1442评论:0
关键词:a标签
微信公众号

微信公众号

在实际网页布局之中,我们有时候需要一整块点击区域中间还要有部分按钮点击,也就是需要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大小,使得鼠标能正确选中a标签;

这种方法的核心思想就是通过定位来模拟实现我们想要达到的效果!

方案三:使用 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标签所能实现的效果!

总结

个人不建议A标签嵌套A标签,不同的设备和浏览器解析的不一样,各种奇葩的问题。

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/A12312312sdlkfjslkdjflkjkl.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    这个可以用,可能是你程序的问题吧...

  • 访客

    能不能原创,网上一找全是这段。这没效果,复制也先自己测测好不????...

  • 访客

    谢谢楼主。。。。。。。。...

  • weblft

    表示不想加班,但是很难!!!...

  • 前端菜鸟

    也不全是我总结的哟,只是学习,大部分是来自大神的杰作。...

  • admin

    感觉不像前端菜鸟,学术很专啊,加油!...

  • admin

    可以的,底部有申请连接的。...

  • BudgetVM优惠码

    朋友交换链接吗...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero