“点击查看显示全文”遇到的超链接默认访问的问题

今天在做一个例子,就是很常见的点击展开全文。
在这里插入图片描述
我觉得这是一个很简单的效果,也就几行代码的事,结果点击了以后立刻隐藏不见,控制台代码也不报错,耽误了我很长时间,最后才发现问题出在超链接身上。
“展开全文”是一个超链接,html代码如下。

<a href="" class="showAll">展开全文</a>

为了使 超链接显示如图所示的效果,它的CSS代码如下,向下的箭头这里是用图片做背景实现的。


.showAll{text-decoration: none;display: block;width: 120px;height: 34px;line-height: 34px;border: 1px solid #d8e7d4;border-radius: 20px; text-align: center;color:#318510;background: url(./images/showall2.png) no-repeat 95px center #e9f4e5;}

javaScript代码如下。

		<script>window.addEventListener('load', function() {var whole = document.querySelector('.showAll')whole.addEventListener('click',function() {document.querySelector(".intro").style.display = "block"this.style.display = 'none'})})</script>

结果按照以上的代码运行的时候,显示后快速消失,而其实js代码并没有语法逻辑等错误,我后来把click换成mouseover,可以正常执行,说明问题出在click点击事件上。而点击对于超链接会带来什么问题呢?超链接有默认的访问行为,我觉得自己找到了问题所在,去看了一下html代码,果然,在敲代码的时候,href=“”,里面什么也没有,我改成了href=“#”,就正常了。
为了程序更严谨,有两种方法:
第一种方法,可以把超链接按如下方式写:

<a href="javascript:void(0);" class="showAll">展开全文</a>

使用javascript:void(0);当用户点击以后不会发生任何事,从而去掉超链接的默认访问行为。

第二种方法,如果不修改html代码,还可以使用preventDefault()阻止默认行为,传递参数event,在javascript中加上一句 e.preventDefault() ,代码如下。

		<script>window.addEventListener('load', function() {var whole = document.querySelector('.showAll')whole.addEventListener('click',function(e) {e.preventDefault()     //  阻止超链接的默认行为document.querySelector(".intro").style.display = "block"  //隐藏的部分显示this.style.display = 'none'})})</script>

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

如何通过Jenkins进行自动化构建项目

1. 介绍 Jenkins 是一个开源的持续集成&#xff08;CI&#xff09;和持续交付&#xff08;CD&#xff09;工具&#xff0c;旨在自动化软件开发过程中的构建、测试和部署。它是一个基于 Java 编写的自动化服务器&#xff0c;在软件开发生命周期的各个阶段提供自动化支持。 官方…

板块一 Servlet编程:第五节 Cookie对象全解 来自【汤米尼克的JAVAEE全套教程专栏】

板块一 Servlet编程&#xff1a;第五节 Cookie对象全解 一、什么是CookieCookie的源码 二、Cookie的具体操作&#xff08;1&#xff09;创建Cookie&#xff08;2&#xff09;获取Cookie&#xff08;3&#xff09;设置Cookie的到期时间&#xff08;4&#xff09;设置Cookie的路径…

SpringMVC 学习(一)之 SpringMVC 介绍

目录 1 MVC 介绍 2 SpringMVC 介绍 2.1 SpringMVC 特点 2.2 SpringMVC 的核心组件 2.3 SpringMVC 执行流程 3 参考文档 1 MVC 介绍 MVC (Model View Controller) 是一种设计思想&#xff0c;它将应用程序分为三大组件&#xff1a;模型 (Model)、视图 (View)、控制器 (Con…

恒峰|高压森林应急消防泵|守护森林安全

森林是地球的肺腑&#xff0c;是人类赖以生存的重要资源。然而&#xff0c;随着人类活动的增加&#xff0c;森林火灾频发&#xff0c;给生态环境和人类生活带来严重威胁。为了保护森林资源&#xff0c;我们必须采取有效的措施进行消防。高压森林应急消防泵作为一种高效、环保的…

【复现】用友U8 oa协同工作系统 文件上传漏洞_57

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 用友U8 &#xff0d;OA 协同办公管理系统&#xff0c;可把日常业务、事物、协作等信息在企业的各分子公司、部门、群组、个人之间…

python获取某天气网站公开天气数据

注意&#xff1a;代码仅用于学习 相关网址&#xff1a;https://tianqi.2345.com/wea_history/57687/htm 查找url : 查找城市ID&#xff1a; 城市ID文件demo.js(JavaScript): function get_city(){var provqxnew Array();provqx[10][58321-H 合肥-58321|71873-B 包河-58321|58…

2023年12月CCF-GESP编程能力等级认证C++编程七级真题解析

一、单选题(共15题,共30分) 第1题 定义变量 double x ,如果下面代码输入为 100 ,输出最接近( )。 A:0 B:-5 C:-8 D:8 答案:B 第2题 对于下面动态规划方法实现的函数,以下选项中最适合表达其状态转移函数的为( )。 A: B: C: D:

【Spring】 AOP面向切面编程

文章目录 AOP是什么&#xff1f;一、AOP术语名词介绍二、Spring AOP框架介绍和关系梳理三、Spring AOP基于注解方式实现和细节3.1 Spring AOP底层技术组成3.2 初步实现3.3 获取通知细节信息3.4 切点表达式语法3.5 重用&#xff08;提取&#xff09;切点表达式3.6 环绕通知3.7 切…

一分钟 由浅入深 学会Navigation

目录 1.官网正式概念 1.1 初认知 2.导入依赖 2.1 使用navigation 2.2 safe Args插件-> 传递数据时用 3.使用Navigation 3.1 搭建初始框架 3.2 确定action箭头的属性 3.3 为Activity添加NavHostFragment控件 3.4 NavController 管理应用导航的对象 3.5 数据传递(单…

给定一个边与边可能相交的多边形,求它的轮廓线

大家好&#xff0c;我是前端西瓜哥。 最近遇到一个需求&#xff0c;给定一个多边形&#xff08;边与边可能相交&#xff09;&#xff0c;求这个多边形的轮廓线。 需要注意的是&#xff0c;轮廓线多边形内不能有空洞&#xff0c;使用的不是常见的非零绕数规则&#xff08;nonze…

SpringBoot3+Vue3 基础知识(持续更新中~)

bean 把方法的返回结果注入到ioc中 1: 2: 3: 组合注解封装 实战篇&#xff1a; 解析token&#xff1a; 统一携带token&#xff1a; 驼峰命名与下划线命名转换&#xff1a; NotEmpty!!! mybatis&#xff1a; PageHelper设置后&#xff0c;会将pageNum,和pageSize自己拼接…

代码随想录算法训练营第四一天 | 背包问题

目录 背包问题01背包二维dp数组01背包一维 dp 数组&#xff08;滚动数组&#xff09;分割等和子集 LeetCode 背包问题 01背包 有n件物品和一个最多能背重量为 w 的背包&#xff0c;第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品只能用一次&#x…

Python urllib、requests、HTMLParser

HTTP协议 HTTP 协议&#xff1a;一般指HTTP(超文本传输)协议。 HTTP是为Web浏览器和Web服务器之间的通信而设计的&#xff0c;基于TCP/IP通信协议嘞传递数据。 HTTP消息结构 客户端请求消息 客户端发送一个HTTP请求到服务器的请求消息包括以下格式 请求行(request line)请求…

【前端素材】推荐优质后台管理系统Start Admin平台模板(附源码)

一、需求分析 后台管理系统是一种用于管理网站、应用程序或系统的工具&#xff0c;它通常作为一个独立的后台界面存在&#xff0c;供管理员或特定用户使用。下面详细分析后台管理系统的定义和功能&#xff1a; 1. 定义 后台管理系统是一个用于管理和控制网站、应用程序或系统…

Linux——静态库

Linux——静态库 静态库分析一下 ar指令生成静态库静态库的使用第三方库优化一下 gcc -I(大写的i) -L -l(小写的l)&#xff0c;头文件搜索路径&#xff0c;库文件搜索路径&#xff0c;连接库 今天我们来学习静态库的基本知识。 静态库 在了解静态库之前&#xff0c;我们首先来…

复旦大学MBA聚劲联合会:洞见智慧,拓宽思维格局及国际化视野

12月2日&#xff0c;“焕拥时代 俱创未来”聚劲联合会俱创会年度盛典暨俱乐部募新仪式圆满收官。16家复旦MBA俱乐部、200余名同学、校友、各界同仁齐聚复旦管院&#xff0c;一起在精彩纷呈的圆桌论坛里激荡思想&#xff0c;在活力四射的俱乐部风采展示中凝聚力量。      以…

CSS 的圆角矩形

CSS 的圆角矩形 通过 border-radius 属性使矩形边框带圆角效果成为圆角矩形 语法&#xff1a;border-radius: length; length 是内切圆的半径&#xff0c;其数值越大, 弧线越明显 border-radius 属性值描述length定义圆角的形状%以百分比定义圆角的形状 生成圆形 让 border-…

高和汽车停工停产,创始人丁磊终于发话了!2024的冷门项目,投入小,但是真的很赚钱!

高和创始人丁磊站在停产停工的工厂呢&#xff0c; 环顾冷清❄️的四周&#xff0c;眉头紧锁&#x1f623;&#xff0c; 停顿片刻后对旁边同样愁眉苦脸的员工说道&#xff1a; 非常抱歉&#xff0c;因为经营的失误&#xff0c;面临了停产停工的窘境。 在互联网&#x1f517;、物…

C/C++的内存管理(2)——new与delete的内核与本质

内存管理 operator new 与 operator delete函数回看new与delete的实现内置类型自定义类型 常见面试题 我们已经知道了new与delete的用法及其好处&#xff0c;发现它似乎与C语言中的动态内存开辟的函数&#xff08;malloc/calloc/realloc&#xff09;不同 在这里我们特别指出&am…

二进制部署k8s集群之cni网络插件

目录 k8s的三种网络模式 pod内容器之间的通信 同一个node节点中pod之间通信 不同的node节点的pod之间通信 flannel网络插件 flannel的三种工作方式 VxLAN host-GW UDP Flannel udp 模式 Flannel VXLAN 模式 flannel插件的三大模式的总结 calico网络插件 k8s 组网…