当前位置： 首页 > news >正文

前端学习-tab栏切换改造项目（三十一）

news 2026/5/17 6:26:18

目录

前言

监听代码

思路

代码

事件委托代码

思路

代码

总结

前言

星垂平野阔，月涌大江流

监听代码

思路

等待DOM加载完成

获取所有标签

为每个标签添加鼠标悬停事件监听器

定义showTab函数：

接收一个索引参数index，用于标识当前悬停的标签

获取所有的标签和内容项

移除所有active类

为当前悬停的标签&&对应的内容添加active类

代码

<!DOCTYPE html>
<html lang="en">
​
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.tab {width: 100%;height: 100%;}
​.tab-nav {width: 490px;height: 40px;background-color: #fff;border: 1px solid #020202;display: flex;align-items: center;}
​.tab-nav ul {list-style-type: none;padding-left: 0;margin: 0;display: flex;}
​.tab-nav ul li {margin-right: 20px;height: 40px;display: flex;align-items: center;}
​.tab-nav ul li a {text-decoration: none;color: inherit;padding: 0 10px;}
​.tab-nav ul li a:hover {color: red;}
​.tab-nav ul li:hover {background-color: gray;}
​.tab-nav h3 {margin-right: 20px;margin-left: 20px;}
​.tab-content {width: 450px;padding: 20px;border: 1px solid #020202;border-top: none;height: 300px;/* 增加高度以容纳更多内容 */overflow-y: auto;/* 添加滚动条 */}
​.tab-content .item {display: none;margin-bottom: 20px;}
​.tab-content .item.active {display: block;}
​.item h2 {color: #333;}
​.item p {color: #666;}
​.item img {max-width: 100%;height: auto;margin-top: 10px;}</style>
</head>
​
<body><div class="tab"><div class="tab-nav"><h3>每日特价</h3><ul><li><a class="active" href="javascript:;">精选</a></li><li><a href="javascript:;">美食</a></li><li><a href="javascript:;">百货</a></li><li><a href="javascript:;">母婴</a></li><li><a href="javascript:;">图书</a></li></ul></div><div class="tab-content"><div class="item active"><h2>精选内容</h2><p>这里是精选内容的描述。</p><img src="https://via.placeholder.com/150" alt="精选图片"></div><div class="item"><h2>美食内容</h2><p>这里是美食内容的描述。</p><img src="https://via.placeholder.com/150" alt="美食图片"></div><div class="item"><h2>百货内容</h2><p>这里是百货内容的描述。</p><img src="https://via.placeholder.com/150" alt="百货图片"></div><div class="item"><h2>母婴内容</h2><p>这里是母婴内容的描述。</p><img src="https://via.placeholder.com/150" alt="母婴图片"></div><div class="item"><h2>图书内容</h2><p>这里是图书内容的描述。</p><img src="https://via.placeholder.com/150" alt="图书图片"></div></div></div>
​<script>document.addEventListener('DOMContentLoaded', function () {const tabs = document.querySelectorAll('.tab-nav ul li a');tabs.forEach((tab, index) => {tab.addEventListener('mouseenter', function () {showTab(index);});});
​function showTab(index) {const tabs = document.querySelectorAll('.tab-nav ul li a');const contents = document.querySelectorAll('.tab-content .item');
​tabs.forEach(tab => tab.classList.remove('active'));contents.forEach(content => content.classList.remove('active'));
​tabs[index].classList.add('active');contents[index].classList.add('active');}});</script>
</body>
​
</html>

事件委托代码

思路

等待DOM加载完成

获取父元素

添加点击事件监听器

获取所有标签和内容项

移除所有active类

获取当前点击的标签的索引

添加active类

代码

<!DOCTYPE html>
<html lang="en">
​
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.tab {width: 100%;height: 100%;}
​.tab-nav {width: 490px;height: 40px;background-color: #fff;border: 1px solid #020202;display: flex;align-items: center;}
​.tab-nav ul {list-style-type: none;padding-left: 0;margin: 0;display: flex;}
​.tab-nav ul li {margin-right: 20px;height: 40px;display: flex;align-items: center;}
​.tab-nav ul li a {text-decoration: none;color: inherit;padding: 0 10px;}
​.tab-nav ul li a:hover {color: red;}
​.tab-nav ul li:hover {background-color: gray;}
​.tab-nav h3 {margin-right: 20px;margin-left: 20px;}
​.tab-content {width: 450px;padding: 20px;border: 1px solid #020202;border-top: none;height: 300px;/* 增加高度以容纳更多内容 */overflow-y: auto;/* 添加滚动条 */}
​.tab-content .item {display: none;margin-bottom: 20px;}
​.tab-content .item.active {display: block;}
​.item h2 {color: #333;}
​.item p {color: #666;}
​.item img {max-width: 100%;height: auto;margin-top: 10px;}</style>
</head>
​
<body><div class="tab"><div class="tab-nav"><h3>每日特价</h3><ul><li><a class="active" href="javascript:;">精选</a></li><li><a href="javascript:;">美食</a></li><li><a href="javascript:;">百货</a></li><li><a href="javascript:;">母婴</a></li><li><a href="javascript:;">图书</a></li></ul></div><div class="tab-content"><div class="item active"><h2>精选内容</h2><p>这里是精选内容的描述。</p><img src="https://via.placeholder.com/150" alt="精选图片"></div><div class="item"><h2>美食内容</h2><p>这里是美食内容的描述。</p><img src="https://via.placeholder.com/150" alt="美食图片"></div><div class="item"><h2>百货内容</h2><p>这里是百货内容的描述。</p><img src="https://via.placeholder.com/150" alt="百货图片"></div><div class="item"><h2>母婴内容</h2><p>这里是母婴内容的描述。</p><img src="https://via.placeholder.com/150" alt="母婴图片"></div><div class="item"><h2>图书内容</h2><p>这里是图书内容的描述。</p><img src="https://via.placeholder.com/150" alt="图书图片"></div></div></div>
​<script>document.addEventListener('DOMContentLoaded', function () {const tabNav = document.querySelector('.tab-nav ul');
​tabNav.addEventListener('click', function (e) {if (e.target.tagName === 'A') {// 获取所有标签const tabs = document.querySelectorAll('.tab-nav ul li a');// 获取所有内容项const contents = document.querySelectorAll('.tab-content .item');
​// 移除所有标签的 active 类tabs.forEach(tab => tab.classList.remove('active'));// 移除所有内容项的 active 类contents.forEach(content => content.classList.remove('active'));
​// 获取当前点击的标签的索引const index = Array.from(tabs).indexOf(e.target);
​// 为当前点击的标签添加 active 类tabs[index].classList.add('active');// 为对应的内容项添加 active 类contents[index].classList.add('active');}});});</script>
</body>
​
</html>

总结

明月出天山，苍茫云海间

相关文章：

前端学习-tab栏切换改造项目（三十一）

目录 前言 监听代码 思路 代码 事件委托代码 思路 代码 总结 前言 星垂平野阔&#xff0c;月涌大江流 监听代码 思路 等待DOM加载完成 获取所有标签 为每个标签添加鼠标悬停事件监听器 定义showTab函数&#xff1a; 接收一个索引参数index&#xff0c;用于标识当前悬停…...

编程日记 2025/2/7 16:47:18

高性能 AI 处理器亲和性调度算法实现

目录 题目描述解题思路分析C 语言实现 生成组合的函数主程序实现C 语言代码使用示例Python 实现 生成组合的函数主程序实现Python 代码使用示例总结与展望题目描述 某公司研发的高性能 AI 处理器，每台物理设备 a 包含 8 颗 AI 处理器，编号为 0 - 7。其中，编号 0 - 3 的处理…...

编程日记 2025/2/7 16:36:57

mq消息丢了，有哪些现象？有什么补救措施

异步发送&#xff1a;生产者发送消息&#xff0c;然后等消费者处理完成后&#xff0c;会有一个回调结果 mq消息丢了常见情况&#xff1a; 1.生产者消息丢失 可能由于网络问题&#xff0c;错误的主题、消息过大等原因导致消息发送失败 2.消费者消息丢失 怎么保证不丢失呢&…...

编程日记 2025/2/7 16:35:45

Java面试场景题分享

假设你在做电商秒杀活动&#xff0c;秒杀开始时&#xff0c;成千上万的用户同时请求抢购商品。你会如何设计系统来处理这些请求&#xff0c;确保库存不超卖 你如何保证库存的准确性&#xff1f; 这个问题引导你思考如何在高并发下确保库存更新的原子性&#xff0c;最直接的方式…...

编程日记 2025/2/7 16:34:41

《ISO/SAE 21434-2021 道路汽车--网络安全工程》标准解读

1 范围 略 2 归一化引用 略 3 术语定义 相关项&#xff1a; 实施车辆级功能的组件或组件集; 例如 安全气囊打开系统 组件&#xff1a; 逻辑上和技术上可分离的部分&#xff1b;例如 微控制器 资产&#xff1a; 具有价值或对价值有贡献的对象&#xff1b;例如 密钥 网络安全…...

编程日记 2025/2/7 16:33:38

【BUUCTF逆向题】[MRCTF2020]Transform

一.[MRCTF2020]Transform 64位无壳&#xff0c;IDA打开发现main函数进入反编译 阅读程序 先输入33位code再加密处理然后验证是否相等的题型 逆向看&#xff0c;验证数组byte_40F0E0已知 再往上看加密处理方式 就是将Str&#xff08;我们输入的flag&#xff09;的每一个索引处…...

编程日记 2025/2/7 16:32:37

漏洞挖掘 | 基于mssql数据库的sql注入

视频教程在我主页简介或专栏里 目录&#xff1a; 前记 0x1 判断网站数据库类型 0x2 了解mssql数据库的主要三大系统表 0x3 了解mssql的主要函数 0x4 判断注入点及其注入类型 0x5 联合查询之判断列数 0x6 联合查询之获取数据库相关信息 0x7 mssql之时间盲注 0x8 mssql之报错注…...

编程日记 2025/2/7 16:30:31

Java 中 LinkedList 的底层源码

在 Java 的集合框架中&#xff0c;LinkedList是一个独特且常用的成员。它基于双向链表实现&#xff0c;与数组结构的集合类如ArrayList有着显著差异。深入探究LinkedList的底层源码&#xff0c;有助于我们更好地理解其工作原理和性能特点&#xff0c;以便在实际开发中做出更合适…...

编程日记 2025/2/7 16:29:30

使用服务器部署DeepSeek-R1模型【详细版】

文章目录 引言deepseek-r1IDE或者终端工具算力平台体验deepseek-r1模型总结 引言 在现代的机器学习和深度学习应用中&#xff0c;模型部署和服务化是每个开发者面临的重要任务。无论是用于智能推荐、自然语言处理还是图像识别&#xff0c;如何高效、稳定地将深度学习模型部署到…...

编程日记 2025/2/7 16:27:27

k8s,1.修改容器内主机名和/etc/hosts 文件，2.root特权容器，3.pod安全策略(基于名称空间

1.修改容器内主机名和/etc/hosts 文件,让持久生效,通过修改资源清单方式---kind: PodapiVersion: v1metadata:name: rootspec:hostname: myhost # 修改主机名hostAliases: # 修改 /etc/hosts- ip: 192.168.88.240 # IP 地址hostnames: # 名…...

编程日记 2025/2/7 16:26:23

MSPFN 代码复现

1、环境配置 conda create -n MSPFN python3.9 conda activate MSPFN pip install opencv-python pip install tensorflow pip install tqdm pip install matplotlib2、train 2.1 创建数据集 2.1.1 数据集格式 |--rainysamples |--file1&#xff1a; |--file2:|--fi…...

编程日记 2025/2/7 16:23:18

除了console.error，还有什么更好的错误处理方式？

除了 console.error，在 Vue 应用中进行更好的错误处理可以采用以下几种方式： 一、使用全局错误处理 Vue 的错误捕获在 Vue 2 中，可以使用 errorHandler 来捕获全局的错误： Vue.config.errorHandler = (err, vm, info) => {// 处理错误，例如记录日志logError(err, info…...

编程日记 2025/2/7 16:22:14

力扣.270. 最接近的二叉搜索树值(中序遍历思想)

文章目录 题目描述思路复杂度Code 题目描述 思路 遍历思想(利用二叉树的中序遍历) 本题的难点在于可能存在多个答案&#xff0c;并且要返回最小的那一个&#xff0c;为了解决这个问题&#xff0c;我门则要利用上二叉搜索树中序遍历为有序序列的特性&#xff0c;具体到代码中&a…...

编程日记 2025/2/7 16:21:08

Yageo国巨的RC系列0402封装1%电阻库来了

工作使用Cadence多年&#xff0c;很多时候麻烦的就是整理BOM&#xff0c;因为设计原理图的时候图省事&#xff0c;可能只修改value值和封装。 但是厂家&#xff0c;规格型号&#xff0c;物料描述等属性需要在最后的时候一行一行的修改&#xff0c;繁琐又容易出错&#xff0c;过…...

编程日记 2025/2/7 16:19:02

wait/notify/join/设计模式

JUC wait obj.wait() 让进入 object 监视器的线程到 waitSet 等待wait&#xff08;&#xff09;方法会释放对象的锁&#xff0c;进入 WaitSet 等待区&#xff0c;从而让其他线程就机会获取对象的锁。无限制等待&#xff0c;直到 notify 为止wait(long n&#xff09;有时限的等…...

编程日记 2025/2/7 16:13:53

Windows Docker笔记-Docker拉取镜像

通过在前面的章节《安装docker》中&#xff0c;了解并安装成功了Docker&#xff0c;本章讲述如何使用Docker拉取镜像。 使用Docker&#xff0c;主要是想要创建并运行Docker容器&#xff0c;而容器又要根据Docker镜像来创建&#xff0c;那么首当其冲&#xff0c;必须要先有一个…...

编程日记 2025/2/7 16:08:41

七大排序思想

目录 七大排序的时间复杂度和稳定性 排序 插入排序 简单插入排序 希尔排序 选择排序 简单选择排序 堆排序 交换排序 冒泡排序 快速排序 快排的递归实现 hoare版本的快排 挖坑法的快排 双指针法的快排 快排的非递归 归并排序 归并的递归实现 归并的非递归实现…...

编程日记 2025/2/7 16:02:34

intra-mart实现简易登录页面笔记

一、前言 最近在学习intra-mart框架&#xff0c;在此总结下笔记。 intra-mart是一个前后端不分离的框架&#xff0c;开发时主要用的就是xml、html、js这几个文件&#xff1b; xml文件当做配置文件&#xff0c;html当做前端页面文件&#xff0c;js当做后端文件&#xff08;js里…...

编程日记 2025/2/7 16:01:31

SpringBoot整合RocketMQ

前言 在当今快速发展的软件开发领域&#xff0c;构建高效、稳定的应用系统是每个开发者的追求。Spring Boot 作为一款极具影响力的开发框架&#xff0c;凭借其强大的自动化配置和便捷的开发特性&#xff0c;极大地简化了项目搭建过程。使用 Spring Boot&#xff0c;我们无需再…...

编程日记 2025/2/7 15:56:20

深入理解 YUV Planar 和色度二次采样 —— 视频处理的核心技术

深入理解 YUV Planar 和色度二次采样 —— 视频处理的核心技术 在现代视频处理和编码中，YUV 颜色空间和**色度二次采样（Chroma Subsampling）**是两个非常重要的概念。它们的结合不仅能够显著减少视频数据量，还能在保持较高视觉质量的同时优化存储和传输效率。而 YUV Plana…...

编程日记 2025/2/7 15:52:11

Biomni项目解析：大语言模型与生物医学知识图谱融合实践

1. 项目概述&#xff1a;当大语言模型遇见生物医学知识图谱最近在探索如何让大语言模型&#xff08;LLM&#xff09;在专业领域&#xff0c;特别是生物医学这种信息密集、关系复杂的领域&#xff0c;变得更“靠谱”一点。相信很多同行都遇到过类似的问题&#xff1a;直接问Chat…...

编程新知 2026/5/17 6:14:50

飞书自动化工具feishu-atuo：Python积木式开发与实战指南

1. 项目概述&#xff1a;飞书自动化&#xff0c;从零到一的效率革命 如果你和我一样&#xff0c;每天的工作流里都离不开飞书&#xff0c;那你肯定也经历过这些时刻&#xff1a;手动把日报、周报从文档复制到表格里归档&#xff1b;在多个群里重复发送同样的通知&#xff1b;为…...

编程新知 2026/5/17 5:19:24

EL电致发光线与3D打印技术打造可穿戴发光骨架服

1. 项目概述&#xff1a;当发光骨架“活”过来每年万圣节&#xff0c;看着满大街的“幽灵”和“僵尸”&#xff0c;我总想搞点不一样的。直到去年&#xff0c;我决定不再满足于商店里千篇一律的服装&#xff0c;而是想自己动手&#xff0c;做一件真正能“发光”的、有科技感的骨…...

编程新知 2026/5/17 4:29:32

告别串口线！用STM32CubeMX给STM32F103C8T6做个USB DFU Bootloader（Keil工程+完整代码）

STM32F103C8T6 USB DFU Bootloader实战&#xff1a;从实验室到产品的完整方案 在嵌入式产品开发中&#xff0c;固件升级是一个绕不开的话题。想象一下&#xff0c;当你的设备已经部署在现场&#xff0c;却发现需要修复一个关键bug或增加新功能时&#xff0c;传统的JTAG/SWD调试…...

编程新知 2026/5/17 2:21:44

基于规则引擎与AI Agent的Google Ads自动化营销系统设计与实践

1. 项目概述&#xff1a;当AI遇上Google Ads&#xff0c;一个自动化营销引擎的诞生最近在折腾一个挺有意思的项目&#xff0c;起因是发现很多团队在管理Google Ads广告时&#xff0c;依然在重复着大量手动、低效的操作。无论是关键词的日常拓词、否定关键词的筛选&#xff0c;还…...

编程新知 2026/5/17 2:01:12

大疆M4系列+YOLOV8识别算法 如何训练无人机罂粟识别检测数据集 让非法种植无处可藏：无人机+AI罂粟识别数据集发布，覆盖花期_果期多阶段检测 无人机俯拍+AI识别罂粟

无人机俯拍AI识别罂粟&#xff0c;准确率超95%&#xff01;&#xff0c;助力禁毒攻坚》​ 《科技禁毒再升级&#xff01;YOLO实测mAP 83.9%》​ 《让非法种植无处可藏&#xff1a;无人机AI罂粟识别数据集发布&#xff0c;覆盖花期/果期多阶段检测 智慧巡检 {专业级AI巡查无人机…...

编程新知 2026/5/17 1:20:15

【负荷预测】基于LSTM-KAN的负荷预测研究（Python代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程新知 2026/5/17 0:28:34

Ovito模块在Python环境下的兼容性排查与实战配置指南

1. 为什么你的Ovito模块总是安装失败&#xff1f; 每次看到那个红色的报错提示&#xff0c;我都想砸键盘。去年给实验室配LAMMPS后处理环境时&#xff0c;光Ovito模块就折腾了我三天。后来才发现&#xff0c;90%的问题都出在Python环境上。Windows系统里32位和64位Python就像两…...

编程新知 2026/5/16 23:37:05

UE5 3D Widget 渲染优化：告别动态模糊与重影困扰

1. 3D Widget动态模糊问题的根源剖析 第一次在UE5项目中使用3D Widget展示动态角色动画时&#xff0c;我被那些飘忽不定的睫毛重影彻底搞懵了。明明在静态预览时一切正常&#xff0c;但只要角色开始眨眼或做表情&#xff0c;睫毛和发丝边缘就会出现诡异的拖影效果&#xff0c;就…...

编程新知 2026/5/16 23:16:01

GPU Burn压力测试实战指南：企业级GPU稳定性验证解决方案

GPU Burn压力测试实战指南&#xff1a;企业级GPU稳定性验证解决方案 【免费下载链接】gpu-burn Multi-GPU CUDA stress test 项目地址: https://gitcode.com/gh_mirrors/gp/gpu-burn 在当今高性能计算和人工智能应用日益普及的背景下&#xff0c;GPU稳定性已成为企业数据…...

编程新知 2026/5/16 22:26:35