a标签嵌套解决方案

问题

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

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

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

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

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

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

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

less 复制代码
<a href="#haorooms">
    outerA
    <object><a href="#haoroomsinner">innerA</a></object>
</a>

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

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

方案二:使用定位方式

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

ini 复制代码
<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标签嵌套的效果了!

还是上面的例子,我们可以如下书写:

xml 复制代码
  <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标签所能实现的效果!

相关推荐
庸俗今天不摸鱼几秒前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187301 分钟前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下7 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox18 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞20 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行21 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_5937581022 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周25 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队43 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯