前端:实现div的隐藏与显示

效果

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>div的隐藏与显示</title><style>/* 标题样式 */h3 {text-align: center;margin: 2%;}/* 主体内容样式 */.content {display: flex;width: 100%;}/* 每一个小块的样式 */.item {flex: 1;display: flex;justify-content: center;}/* 按钮样式 */.hidden_btn {display: flex;width: 100%;justify-content: center;align-items: center;margin: 1%;}.btn_psn {width: 50%;display: flex;justify-content: center;align-items: center;height: 15px;color: #ccc;cursor: default;}.btn_psn:hover {/* 鼠标样式设置为默认手势 */cursor: default;width: 50%;display: flex;justify-content: center;align-items: center;height: 15px;color: #000;background-image: linear-gradient(to right, rgb(196, 206, 218, 0) 0%, rgb(196, 206, 218, 0.5) 50%, rgb(196, 206, 218, 0) 100%);/* 多个渐变色 */}.btn_arrow {padding: 5px;height: 100%;transform: rotate(90deg);}.arrow-up { transform: rotate(-90deg);}.arrow-down {transform: rotate(90deg);}/* 隐藏的数据样式,开始设置为不展示 */#hidden_data {display: none;}</style></head><body><h3>这是一个关于display让div显示与隐藏的测试</h3><!-- 第一部分:需要显示的部分 --><div class="content"><div class="item"><span>姓名:</span><input type="text"></div><div class="item"><span>年龄:</span><input type="text"></div><div class="item"><span>性别:</span><input type="text"></div><div class="item"><span>生日:</span><input type="text"></div></div><!-- 按钮 --><div class="hidden_btn"><div class="btn_psn" onclick="toggleHiddenBtn()"><div class="btn_arrow" id="arrow">&gt;</div></div></div><!-- 第二部分:可显示可隐藏的部分 --><div class="content" id="hidden_data"><div class="item"><span>姓名:</span><input type="text"></div><div class="item"><span>年龄:</span><input type="text"></div><div class="item"><span>性别:</span><input type="text"></div><div class="item"><span>生日:</span><input type="text"></div></div><!-- 写入js,实现主体样式的隐藏与显示的切换 --><script>function toggleHiddenBtn() {var hiddenBtn = document.getElementById("hidden_data");var arrow = document.getElementById("arrow");if (hiddenBtn.style.display === "none") {hiddenBtn.style.display = "flex";arrow.classList.remove("arrow-down");arrow.classList.add("arrow-up");} else {hiddenBtn.style.display = "none";arrow.classList.remove("arrow-up");arrow.classList.add("arrow-down");}}</script></body>
</html>

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

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

相关文章

2021年12月14日 Go生态洞察:Go 1.18 Beta 1 发布与泛型的引入

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

C语言:求十个数中的平均数

分析&#xff1a; 程序中定义了一个average函数&#xff0c;用于计算分数的平均值。该函数接受一个包含10个分数的数组作为参数&#xff0c;并返回平均值。在主函数main中&#xff0c;首先提示输入10个分数&#xff0c;然后使用循环读取输入的分数&#xff0c;并将它们存储在名…

【BEV感知 LSS方案】Lift-Splat-Shoot(LSS)

前言 LSS全称是Lift-Splat-Shoot&#xff0c;它先从车辆周围的多个摄像头拍摄到的图像进行特征提取&#xff0c;在特征图中估计出每个点的深度&#xff0c;然后把这些点“提升”到3D空间中。 接着&#xff0c;这些3D信息被放置到一个网格上&#xff0c;最后将这些信息“拍扁”…

OSI七层模型与TCP/IP四层模型

一、OSI七层模型简述 OSI 模型的七层是什么&#xff1f;在 OSI 模型中如何进行通信&#xff1f;OSI 模型有哪些替代方案&#xff1f; TCP/IP 模型关于专有协议和模型的说明 二、七层模型详解&#xff08;DNS、CDN、OSI&#xff09; 状态码DNS nslookup命令 CDN whois命令 …

Java中的异常你了解多少?

目录 一.认识异常二.异常分类三.异常的分类1.编译时异常2.运行时异常 四.异常的处理1.LYBL&#xff1a;事前防御型2.EAFP&#xff1a;事后认错型 五.异常的抛出Throw注意事项 六.异常的捕获1.异常的捕获2.异常声明throws3.try-catch捕获并处理 七.自定义异常 一.认识异常 在Jav…

Python实现FA萤火虫优化算法优化BP神经网络分类模型(BP神经网络分类算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 萤火虫算法&#xff08;Fire-fly algorithm&#xff0c;FA&#xff09;由剑桥大学Yang于2009年提出 , …

ChatGPT探索:提示工程详解—程序员效率提升必备技能【文末送书】

文章目录 一.人工智能-ChatGPT1.1 ChatGPT简介1.2 ChatGPT探索&#xff1a;提示工程详解1.2 提示工程的优势 二.提示工程探索2.1 提示工程实例&#xff1a;2.2 英语学习助手2.3 Active-Prompt思维链&#xff08;CoT&#xff09;方法2.4 提示工程总结 三.文末推荐与福利3.1《Cha…

这几款 idea 插件让效率起飞!

作者&#xff1a;苍何&#xff0c;前大厂高级 Java 工程师&#xff0c;阿里云专家博主&#xff0c;CSDN 2023 年 实力新星&#xff0c;土木转码&#xff0c;现任部门技术 leader&#xff0c;专注于互联网技术分享&#xff0c;职场经验分享。 &#x1f525;热门文章推荐&#xf…

【CAD二次开发】标注箭头,获取修改标注箭头图块

常见的的标注箭头有以下种类 public static List<string> ArrowBlock = new List<string>(){" ","_CLOSEDBLANK&

如何选择靠谱的安防监控系统?优秀的安防智能系统应该具备哪些特点?

随着科技的不断进步&#xff0c;安防智能系统变得越来越重要。当前的安防监控市场系统五花八门&#xff0c;用户该如何选择性比价高、功能又靠谱的平台&#xff1f;一个优秀的安防智能系统应该具备哪些特点&#xff1f;今天我们来针对这个话题讨论和分享一下。 1、高效性&…

带你手搓阻塞队列——自定义实现

&#x1f308;&#x1f308;&#x1f308;今天给大家分享的是——阻塞队列的自定义实现&#xff0c;通过自定义实现一个阻塞队列&#xff0c;可以帮助我们更清晰、更透彻的理解阻塞队列的底层原理。 清风的CSDN博客 &#x1f6e9;️&#x1f6e9;️&#x1f6e9;️希望我的文章…

Java全栈基础篇--集合

集合 集合&#xff1a;集合是java中提供的一种容器&#xff0c;可以用来存储多个数据。 特点&#xff1a; 长度不固定&#xff0c;还可以存储不同的数据&#xff08;但是一般都用同一类型&#xff09; 集合和数组既然都是容器&#xff0c;它们有啥区别呢&#xff1f; 数组的长…

EasyAmplicon (易扩增子)-扩增子高通量序列分析软件流程及脚本-详细使用方法——来自刘永鑫团队的秘籍

其他不重要&#xff0c;重要的是方向&#xff0c;资源&#xff0c;还要好用&#xff0c;建议大家先看看论文介绍&#xff1a; https://doi.org/10.1002/imt2.83EasyAmplicon: An easy‐to‐use, open‐source, reproducible, and community‐based pipeline for amplicon data…

软件测试-测试用例案例及思维导图展示

自动售货机的测试用例 一个杯子的测试用例 一支笔的测试用例 朋友圈点赞的测试用例 功能测试 1点赞后是否显示结果 2.点赞后是否可以取消; 3.点赞取消后是否可以重复点赞; 4.共同好友点赞后&#xff0c;是否有消息提醒; 5.非共同好友点赞后&#xff0c;是否有消息提醒; 6.点击…

[数据结构]深入浅出讲解二叉树-平衡二叉树-左右旋转

树是一种数据结构&#xff0c;单位为Node(节点)。不同于链表的直线排列&#xff0c;树呈现一种自上而下的分层排序规则。 树->数据结构&#xff1a; 单元为Node(节点)->当这样的节点多了 就可以关联出不同的形态 一个父节点有一个左子节点&#xff0c;有…

uniapp-从后台返回的一串地址信息上,提取省市区进行赋值

1.这是接口返回的地址信息 2.要实现的效果 3.实现代码&#xff1a; <view class"address">{{item.address}}</view>listFun() {let url this.$url.url.positionInfoCompany;let param {page: this.page,limit: this.limit,keyword: this.keyword,};thi…

Python 入门

目录 编译性语言 解释型语言 Python语言介绍 Python安装 配置环境变量 Pycharm安装 Pycharm基本使用 编译性语言 解释型语言 计算机是不能理解高级语言的&#xff0c;更不能直接执行高级语言&#xff0c;它只能直接理解机器语言&#xff0c;所以使用任何高级语言编写的程…

应用于智慧金融的AI边缘计算盒子+AI算法软硬一体化方案

传统金融营业厅存在运营管理模式落后、资源投放不平衡、从业人员培训效果不达预期、客户体验割裂等普遍现象&#xff1b; 部署英码数字金融解决方案&#xff0c;将助力企业从传统金融模式快速向数字金融模式转变&#xff0c;可针对每一个客户定制个性化“一对一”服务&#xff…

基于springboot+vue的点餐系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

【23真题】耗时一周还原,终于有真题啦!

今天分享的是23年上海电力850的信号与系统回忆版试题及解析。上电的真题资源极其稀少&#xff0c;去年我找了3份&#xff0c;全部为假&#xff01;好在今年有刚刚上岸的同学全力协助&#xff0c;为大家弄出一份回忆版真题&#xff0c;希望对大家有帮助&#xff01; 小马哥Tips…