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

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

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>

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/409883.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysq5.7 主主同步

db01 172.21.0.10 db02 172.21.0.14 一、安装数据库看上一遍博客 修改配置文件 db01 172.21.0.10 [rootVM_0_10_centos mysql]# cat /etc/my.cnf [mysqld] port3306 character-set-serverutf8 basedir/usr/local/mysql datadir/usr/local/mysql/data #innodb_buffer_pool_…

代码整洁之道 python_Python代码整洁之道:编写优雅的代码

译者序前言致谢关于作者关于技术审校者第1章 关于Python的思考11.1 编写Python代码11.1.1 命名21.1.2 代码中的表达式和语句51.1.3 拥抱Python编写代码的方式81.2 使用文档字符串141.2.1 模块级文档字符串171.2.2 使类文档字符串具有描述性171.2.3 函数文档字符串181.…

python猜数字游戏实例_Python案例:猜数字小游戏,由浅入深!

本案例只适合新手&#xff0c;老司机请绕路。 游戏介绍&#xff1a;程序自己有一个数字&#xff0c;用户输入一个数字&#xff0c;两个数字进行比较。 可以学到的知识点&#xff1a;input函数、字符串、while循环、if条件判断语句、break语句。 一、 简单版 猜数字游戏&#xf…

PLSQL

每个语句可加“&#xff1b;”也可以不加“&#xff1b;”但是连在一起执行必须加“&#xff1b;”delete taccorequest;commit;select * from taccorequest;转载于:https://www.cnblogs.com/JackShao/archive/2012/04/30/2476942.html

基于DispatchProxy打造自定义AOP组件

DispatchProxy是微软爸爸编写的一个代理类&#xff0c;基于这个&#xff0c;我扩展了一个AOP组件 暂时不支持依赖注入构造方法&#xff0c;感觉属性注入略显麻烦&#xff0c;暂时没打算支持 基于特性的注入流程 [AttributeUsage(AttributeTargets.Method)]internal class TestA…

算法整理学习(二)

&#xff08;注&#xff1a;以下算法答案来自网络&#xff0c;自己整理供学习&#xff09; 3.约瑟夫循环报数出列顺序问题思路&#xff1a;采用循环链表&#xff0c;当然也可以采用数组&#xff0c;像模拟循环队列一样 //方法一&#xff1a; 采用找到一个节点删除一个节点的方式…

python判断ip能否ping通_使用Python测试Ping主机IP和某端口是否开放的实例

使用Python方法比用各种命令方便&#xff0c;可以设置超时时间&#xff0c;到底通不通&#xff0c;端口是否开放一眼能看出来。命令和返回完整权限&#xff0c;可以ping通&#xff0c;端口开放&#xff0c;结果如下&#xff1a;无root权限(省略了ping)&#xff0c;端口开放&…

python实现抓取网页上的内容并发送到邮箱

要达到的目的&#xff1a;从特定网页中抓取信息&#xff0c;排版后发送到邮箱中 关键点&#xff1a;下载网页&#xff0c;从网页里抓取出需要的信息HTML排版发送到指定邮箱 实现&#xff1a;1.python下载网页直接用库函数就可以实现from urllib import urlretrievefrom urllib …

Thinkphp 配置不用输入index.php

版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&#xff0c;转载请附上原文出处链接和本声明。 本文链接&#xff1a;https://blog.csdn.net/u011186019/article/details/78495461由&#xff1a;http://127.0.0.1/thinkphp/index.php/index/in…

ue4导入倾斜摄影_倾斜摄影建模干货|还怕搞不定CC空三?这里只要5分钟……

关注公众号"三维前沿"&#xff0c;持续获取更多操作技巧干货&#xff01;01Q&#xff1a;空三刚开始就失败&#xff1f;A&#xff1a;考虑以下4种情况&#xff1a;考虑ContextCapture Engine 是否打开&#xff0c;尝试关闭后重新打开&#xff1b;考虑相片数量是否过多…

[html] 如何禁止移动端的左右划动手势?

[html] 如何禁止移动端的左右划动手势&#xff1f; html{touch-action:none;touch-action:pan-y;}个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

python自增_python mysql自增字段AUTO_INCREMENT值的修改方式

在之前得文章中我们说过&#xff0c;如果使用delete对数据库中得表进行删除&#xff0c;那么只是把记录删除掉&#xff0c;并且id的值还会保持上次的状态。 即删除之前如果有四条数据&#xff0c;删除之后&#xff0c;再添加新的数据&#xff0c;id怎会从5开始。 但是我们显示想…

Python工具

1. sourcetree https://www.cnblogs.com/hoobey/p/7100593.html 2.pycharm 3. anaconda 转载于:https://www.cnblogs.com/ericazy/p/11498959.html

graphpad两组t检验_GraphPad prism -- t检验操作步骤解析~

ZSCIt检验&#xff0c;主要用于样本含量较小(例如 n<30)&#xff0c;总体标准差 σ 未知的正态分布资料&#xff0c;其中又将其分为了配对t检验和成组t检验&#xff0c;那如何利用GraphPad prism进行t检验呢&#xff1f;一、原理及意义配对t检验&#xff1a;又称配对样本均数…

[html] 在两个iframe之间传递参数的方法有哪些?

[html] 在两个iframe之间传递参数的方法有哪些&#xff1f; 通过postMessage与父级通过&#xff0c;父级传递消息通过websocket通信如果是同一个域名下可用stroage&#xff0c;监听storageChange事件通信通过web worker也可通信个人简介 我是歌谣&#xff0c;欢迎和大家一起交…

Java官方操纵byte数组的方式

java官方提供了一种操作字节数组的方法——内存流&#xff08;字节数组流&#xff09;ByteArrayInputStream、ByteArrayOutputStream ByteArrayOutputStream——byte数组合并 /*** 将所有的字节数组全部写入内存中&#xff0c;之后将其转化为字节数组*/public static void main…

python js返回 json_[python爬虫]把js转化成json

有一个优秀的库可以使用————demjson目标链接请求上面链接&#xff0c;会得到如下图的一个js文件我们需要把这个js文件转成为dict&#xff0c;方便提取其中需要的字段(这在爬虫任务中非常常见)失败的方法传统方法通常转js文件为dict的过程&#xff1a;1.先通过切片掐头去尾&…

springboot security 权限不足_springBoot整合springSecurity(零一)

整体结构》》》1&#xff0c;springboot2.0整合springSecurity5.1.12&#xff0c;mysql--->>InnoDB3&#xff0c;持久层我用的是用MybatiysPlus(这里就不写关于这个的了,基本是查)4&#xff0c;web服务不是jar服务5&#xff0c;数据库表》账户表/角色表/权限表/账户角色关…

聊聊PowerJob的OmsLogHandler

序 本文主要研究一下PowerJob的OmsLogHandler OmsLogHandler tech/powerjob/worker/background/OmsLogHandler.java Slf4j public class OmsLogHandler {private final String workerAddress;private final Transporter transporter;private final ServerDiscoveryService …

[html] 为什么移动端页面的设计稿一般是750px/640px呢?

[html] 为什么移动端页面的设计稿一般是750px/640px呢&#xff1f; 750px 代表iphone6或inphone6s 设备的像素(宽) 640px 代表inpone3Gs&#xff0c;inpone4/4s iphone5系列 设备的像素(宽) 其他手机大多数时这两种规格 750px/640px 代表的逻辑像素是 375px/320px&#xff0c;…