vue3手动封装一个点击切换下滑线,事件委托,实现简易选项卡

article/2025/7/12 3:06:00

点击切换下滑线

看看效果
 

body主要代码:

把点击事件绑定到父元素身上,因为把每个li都绑定一个事件工作量太大了,也不显示;所以利用事件委托

<ul @click="disPlay"><li class="wy">网页端</li><li class="sji">手机端</li></ul>

前端性能优化:在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能

事件委托的原理:事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。

在js中的代码:

封装了一个函数

//  简易版,并不是最优方法,封装了一个disPlay的函数,通过e来获取事件

const disPlay=(e)=>{// e.target.parentNode拿到父元素// e.target.parentNode.children拿到了两个子元素console.log(e.target.parentNode.children);if(e.target.innerText=="网页端"){  // 利用li标签中的文字来进行判断e.target.parentNode.children[1].style.borderBottom='0'  其他子元素设置为空e.target.style.borderBottom='3px solid rgb(241, 112, 53)'  给当前点击的元素设置样式}else{if(e.target.innerText=="手机端"){e.target.parentNode.children[0].style.borderBottom='0'e.target.style.borderBottom='3px solid rgb(241, 112, 53)'}}}

改进版本

const disPlay=(e)=>{let node=e.target.parentNode.childrenfor(let i=0;i<node.length;i++)node[i].style.borderBottom='0';// 不能是父元素,如果是父元素的话会有一条长的横线if(e.target.className=='ull'){e.target.style.borderBottom='0'}else{e.target.style.borderBottom='3px solid rgb(241, 112, 53)'}}

在此基础上我们可以做一个简易的选项卡切换

看看效果

body代码

<div class="xuanxiang" @click="disPlay"><!-- 选项卡 --><div>买房<div class="mf">买房呀</div></div><div>卖房<div class="maif">卖房呀</div></div></div>

js代码

// 选项卡
const disPlay=(e)=>{let nodes = e.target?.parentNode.children;for (let i = 0;i<nodes.length; i++){nodes[i].children[0].style.display= 'none'}e.target.children[0].style.display='block'console.log(2,e.target.children[0]);
}

css代码

 .maif{display: none;}


http://chatgpt.dhexx.cn/article/7JgvhWAU.shtml

相关文章

【参赛时间延长】InterSystems技术写作大赛:Python

嗨&#xff0c;开发者们&#xff01;欢迎加入第二届InterSystems技术写作大赛&#xff01; &#x1f40d; InterSystems技术写作大赛&#xff1a;Python &#x1f40d; 6月20日至七月20日 延长至7月31日&#xff0c;在社区撰写一篇利用InterSystems技术使用Python的文章&#x…

关于 Android 中 TabLayout 下划线适配文字长度解析(附清晰详细的源码解析)

温故而知新 坚持原创 请多多支持 一、问题背景 假期在做项目的时候&#xff0c;当时遇到了一个需求就是需要使用 TabLayout ViewPager 来实现一个上部导航栏的动态效果&#xff0c;并且希望下划线的长度等于或者小于导航栏中文字的宽度&#xff0c;当时从网上查询资料的时候是…

2021-4-29 工作记录--CSS-鼠标划过文字时,文字下方出现往两边延伸的下划线 + 鼠标划过文字,文字下面的下划线向中间消失;鼠标离开文字,文字下面的下划线向两边延申出现

一、CSS-鼠标划过文字时&#xff0c;文字下方出现往两边延伸的下划线 方法1&#xff1a; 举例&#xff1a; HTML: CSS: 对应代码&#xff1a; //css鼠标划过文字出现往两边延伸的下划线 .header_l li a, .header_r li:not(:last-child) a {position: relative;padding:…

html+导航栏+点击下划线,html导航栏点击后出现下划线_【Word教程】教你制作输入文字依然对齐的封面下划线......

点击上方“祕技”&#xff0c;关注我们 &#xff5e;助你提升工作技能~ 阅读全文大约需10分钟 在学习和生活中&#xff0c;使用word进行封面制作是很常见的应用场景&#xff0c;而下划线又是封面中不可缺少的元素。 很多同学在制作下划线时采用的是“空格下划线”的方法&#x…

论文封面标题下划线制作

一、问题描述 学校发的模板在填写信息的时候&#xff0c;下划线总是填写多少字就延长多少&#xff0c;文字前后加上空格 &#xff08;这样线是变长的&#xff09;是因为他用了文字下划线法&#xff1b; 二、制作方法 先将文字信息罗列出来 统一调整字符宽度 按照最长的字符长…

你不知道的下划线属性-text-decoration

大家好&#xff0c;我是半夏&#x1f474;&#xff0c;一个刚刚开始写文的沙雕程序员.如果喜欢我的文章&#xff0c;可以关注➕ 点赞 &#x1f44d; 加我微信&#xff1a;frontendpicker&#xff0c;一起学习交流前端&#xff0c;成为更优秀的工程师&#xff5e;关注公众号&…

html中加长下滑线,css怎么设置下划线的长度?

层叠样式表(英文全称&#xff1a;Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 自定义下划线。使用:after&#xff0c;首先添加一个空的内容&#xff0c;为了让它排列到标题的下面&#…

七彩视界开源全解公益版,全新后台非常漂亮,全网首发!

苍穹影视V20七彩视界开源全解公益版&#xff0c;全新后台非常漂亮&#xff0c;全网首发&#xff01; 苍穹影视V20七彩视界开源全解公益版&#xff0c;全新后台非常漂亮内有安装教程 下载地址&#xff1a;https://www.lanzoux.com/iiENsex40lc 注苍穹网络

新版七彩苹果ios推荐影片播放变返回按钮解决

收到用户反映&#xff0c;新版七彩苹果ios首页底部的推荐影片播放变成返回按钮问题 解决方法如下&#xff1a;打开前端文件搜索并进入路径 /html/video/play_UIBPlayer_recommend_for_ios_main 打开文件找到第437行 437行最前边打上单行注释// 即可解决问题 本文转载&…

七彩影视四个步骤去除CMS教程

网传七彩源码原生播放器苹果端cms有问题&#xff0c;有能力自己修复&#xff0c;没能力请删除cms 下面由浪杉博客提供教程&#xff0c;将框选代码直接删除&#xff0c;数字往上推即可&#xff01; 文件分别是 /index.html ./script/vedio_controller.js 本文转载&#xff0c…

新版七彩影视修复二级返佣修改重置问题

近期收到反馈新七彩影视多端版二级返佣修改不了&#xff0c;无论怎么修复都是重置20%比例 现在浪杉博客这边教大家如何修改&#xff1a; 首先找到路径&#xff1a; /application/index/controller/Index.php 打开文件后搜索 agent_rebate_c 搜索到后会自动跳转位置&#xff…

黄河千年清一回与人类健康

黄河千年清一回奏响一曲曲让人类走进幸福新时代的壮丽凯歌。疫情之后的首届全世界健康产业发展大会 5 月28 日上午 9 时在中国首都北京召开 The Yellow River has played a magnificent song of triumph in the millennium, ushering humanity into a new era of happiness. T…

广东金龄会垮省文旅游——走进七彩云南昆明融创

&#xff08;本栏目记者实况报道&#xff09;近日由广东省健康金龄公益演艺委员会联合昆明融创文旅城&#xff0c;共同组织的两省中老年文艺交流活动&#xff0c;在昆明融创正式拉开序幕&#xff0c;此次活动旨在响应国家新型养老爱老服务体系&#xff0c;将文旅与演艺结合&…

Android 程序员不得不收藏的个人博客(持续更新...)

微信不支持外链&#xff0c;请点击原文查看文中链接。 本文已收录我的 Github &#xff0c;持续更新中 &#xff0c;欢迎点赞 &#xff01; 每周打开一次收藏夹里的个人博客&#xff0c;已经成为了我的人生一大乐趣。 相比各大博客平台&#xff0c;我一直更加偏爱个人博客。在每…

小米Civi 1S 定价2299元起,主打美颜,让你上镜自由

4月21日&#xff0c;小米正式发布小米Civi 1S和小米智能家庭屏10两款重磅新品。 小米Civi 1S是专为年轻人打造的潮流手机&#xff0c;带来外观、美拍和流畅三大升级。外观加入行业稀缺的奇迹阳光&#xff08;白色&#xff09;配色&#xff0c;阳光下能够呈现绚丽的七彩效果。 …

为何恒星/太阳(辐射)可以被视为黑体(辐射)?

文章目录 1. 黑体与黑体辐射的概念1.1 黑体1.2 黑体的实现1.3 黑体辐射1.4 黑体辐射概念的应用1.5 黑体辐射相关历史 2. 恒星&#xff08;太阳&#xff09;内部的情况2.1 太阳内部情况2.2 太阳辐射光谱2.3 高分辨率太阳光谱 3. 关于恒星&#xff08;辐射&#xff09;是否可以被…

七彩影视双端新版本源码

简介&#xff1a; 七彩双端新版本源码 支持PCWAPAPP三端 对接苹果CMS后台 网盘下载地址&#xff1a; http://kekewl.org/eas65KcT9de0 图片&#xff1a;

苍穹影视V20七彩视界免sq源码 kyuan源码

介绍&#xff1a; 1.修改后台数据库文件application/database.php 2.导入数据库&#xff0c;PHP安装扩展&#xff1a;rides/sg113.前端修改config.xml中相关信息 3. 注册apicloud,使用小乌龟上传前端文件&#xff0c;添加所有模块&#xff0c;完成前端安装 4. 后台账号admin密…

苍穹影视V20七彩视界免授权开源源码

介绍&#xff1a; 1.修改后台数据库文件application/database.php 2.导入数据库&#xff0c;PHP安装扩展&#xff1a;rides/sg11 3.前端修改config.xml中相关信息 3. 注册apicloud,使用小乌龟上传前端文件&#xff0c;添加所有模块&#xff0c;完成前端安装 4. 后台账号admin密…

新版七彩视界影视双端百果深海蓝UI前端主题

新版七彩影视双端源码百果深海蓝UI前端主题 1.修复后端报错泄露数据库信息。 2.修复对接苹果cms对接安全接口。 3.修复前端官解换线卡顿或延迟重音问题。 4.修复切换线路延迟卡死不能返回问题&#xff0c;秒切线路更加流畅。 5.修复芒果换集无法识别线路跳转通用线路问题。 6.修…