[html] a标签可以再嵌套a标签吗?为什么?如果不行,那又想要嵌套效果怎么解决呢?

haizhilin2013
2020-02-12 04:36:37 星期三
html
                    
                        
a标签可以再嵌套a标签吗?为什么?如果不行,那又想要嵌套效果怎么解决呢?
Comments per page
< Page 1 / 1 >
NieShiyi 2020-02-12 09:58:28

a标签不能嵌套a标签

<a href="https://www.baidu.com/" class="parent">
    点击父级标签
    <a href="https://www.baidu.com/" target="_blank" class="child">点击子级标签</a>
</a>

结果在浏览器上解析为,嵌套失败:

<a href="https://www.baidu.com/" class="parent">点击父级标签</a>
<a href="https://www.baidu.com/" target="_blank" class="child">点击子级标签</a>

那么实现嵌套效果(点击子标签时跳转,点击父标签时跳转):

1.和上面的布局一样,样式改变如下,给父元素加绝对定位:

.parent {
    display: block;
    position: absolute;
    width: 200px;
    height: 100px;
    border: 1px solid blue;
    text-align: center;
    line-height: 100px;
}
.child {
    color: red;
}

2.中间加一层object标签如下(大部分浏览器支持,但是还是存在兼容性):

<a href="https://www.baidu.com/" class="parent">
    点击父级标签
    <object data="" type="">
        <a href="https://www.baidu.com/" target="_blank" class="child">点击子级标签</a>
    </object>
</a>

3.还可以不用a标签(随便用什么标签,实现嵌套和跳转功能),加js如下:

<div class="parent" id="parent">
  点击父级标签
  <a href="https://www.baidu.com/" target="_blank" rel="noopener noreferrer" class="child" id="child">点击子级标签</a>
</div>
<script>
  window.onload = () => {
      let parent = document.getElementById('parent');
      let child = document.getElementById('child');
      parent.onclick = () => {
          alert("在本页跳转到百度");
          window.location.href = 'https://www.baidu.com/';
      };
      child.onclick = (e) => {
          // 阻止事件默认的向上冒泡行为
          e.stopPropagation();
          alert("打开新页面跳转到百度");
      };
  };
</script>
censek 2020-04-30 05:53:45
排行榜
今日答题答题排行
    未答的题
    更多>
      【关注作者公众号】 以面试驱动学习--前端剑解
      【公众号推荐】 不折腾的前端和咸鱼有什么区别

      学习不打烊,充电加油只为遇到更好的自己,365天无节假日,每天早上5点纯手工发布前端知识点(死磕自己,愉悦大家)。希望大家在这浮夸的前端圈里,保持冷静,坚持每天花20分钟来学习与思考。在这千变万化,类库层出不穷的前端,建议大家不要等到找工作时,才狂刷题,提倡每日学习!欢迎大家关注3+1开源项目!希望大家每人去学习与思考!(不要为了谁而来,要为自己而努力!

      【关注官方公众号】 每天4:30-5:00推送
      【公众号推荐】 一起折腾前端算法
      【微信学习群】 备注3+1