当前位置: 首页 > 科技观察

前端开发:一个标签嵌套解决方案

时间:2023-03-22 10:13:10 科技观察

一个标签嵌套其他元素,你肯定会遇到。问题出在实际的网页布局中。有时候我们需要在整个点击区域中间点击按钮的一部分,也就是我们需要一个标签来嵌套一个标签,如下:outerAinnerA但是,我们会发现浏览器会直接对这种嵌套进行错解析,解析结果如下:outerAinnerA那么这种情况怎么解决呢?解决方案1:使用对象标签进行嵌套。比如我们这样写,就不会出现解析错误!outerAinnerA这种写法的典型应用是需要点击整个列表,并且有电话号码需要单独点击拨打!列表内容调用方案二:使用定位方式方法是万不得已,我们的想法是我们不需要嵌套。直接代码是这样写的:outerAinnerA外面的haorooms通过设置display:inline-block和绝对定位放在里面a标签在内层的位置。然后调整内层a标签和外层a的z-index大小,使鼠标能够正确选中a标签;这个方法的核心思想就是通过定位来模拟我们想要达到的效果!方案三:使用HTML的标签实现。记得制作学校网页时,用的是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>方案四:使用span等标签加js事件替换a标签当然我们也可以使用span、tags等替换a标签,但是需要多写js跳转代码,使用js实现a标签可以达到的效果!【本文为专栏作家“谢军”原创稿件,可通过作者微信公众号(jingfeng18)取得联系】点此阅读更多本作者好文