前端学习-tab栏切换改造项目（三十一）
目录
前言
监听代码
思路
代码
事件委托代码
思路
代码
总结
前言
星垂平野阔，月涌大江流
监听代码
思路
等待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栏切换改造项目（三十一）
目录 前言 监听代码 思路 代码 事件委托代码 思路 代码 总结 前言 星垂平野阔，月涌大江流 监听代码 思路 等待DOM加载完成 获取所有标签 为每个标签添加鼠标悬停事件监听器 定义showTab函数： 接收一个索引参数index，用于标识当前悬停…...
高性能 AI 处理器亲和性调度算法实现
目录 题目描述解题思路分析C 语言实现 生成组合的函数主程序实现C 语言代码使用示例Python 实现 生成组合的函数主程序实现Python 代码使用示例总结与展望题目描述 某公司研发的高性能 AI 处理器，每台物理设备 a 包含 8 颗 AI 处理器，编号为 0 - 7。其中，编号 0 - 3 的处理…...
mq消息丢了，有哪些现象？有什么补救措施
异步发送：生产者发送消息，然后等消费者处理完成后，会有一个回调结果 mq消息丢了常见情况： 1.生产者消息丢失 可能由于网络问题，错误的主题、消息过大等原因导致消息发送失败 2.消费者消息丢失 怎么保证不丢失呢&…...
Java面试场景题分享
假设你在做电商秒杀活动，秒杀开始时，成千上万的用户同时请求抢购商品。你会如何设计系统来处理这些请求，确保库存不超卖 你如何保证库存的准确性？ 这个问题引导你思考如何在高并发下确保库存更新的原子性，最直接的方式…...
《ISO/SAE 21434-2021 道路汽车--网络安全工程》标准解读
1 范围 略 2 归一化引用 略 3 术语定义 相关项： 实施车辆级功能的组件或组件集; 例如 安全气囊打开系统 组件： 逻辑上和技术上可分离的部分；例如 微控制器 资产： 具有价值或对价值有贡献的对象；例如 密钥 网络安全…...
【BUUCTF逆向题】[MRCTF2020]Transform
一.[MRCTF2020]Transform 64位无壳，IDA打开发现main函数进入反编译 阅读程序 先输入33位code再加密处理然后验证是否相等的题型 逆向看，验证数组byte_40F0E0已知 再往上看加密处理方式 就是将Str（我们输入的flag）的每一个索引处…...
漏洞挖掘 | 基于mssql数据库的sql注入
视频教程在我主页简介或专栏里 目录： 前记 0x1 判断网站数据库类型 0x2 了解mssql数据库的主要三大系统表 0x3 了解mssql的主要函数 0x4 判断注入点及其注入类型 0x5 联合查询之判断列数 0x6 联合查询之获取数据库相关信息 0x7 mssql之时间盲注 0x8 mssql之报错注…...
Java 中 LinkedList 的底层源码
在 Java 的集合框架中，LinkedList是一个独特且常用的成员。它基于双向链表实现，与数组结构的集合类如ArrayList有着显著差异。深入探究LinkedList的底层源码，有助于我们更好地理解其工作原理和性能特点，以便在实际开发中做出更合适…...
使用服务器部署DeepSeek-R1模型【详细版】
文章目录 引言deepseek-r1IDE或者终端工具算力平台体验deepseek-r1模型总结 引言 在现代的机器学习和深度学习应用中，模型部署和服务化是每个开发者面临的重要任务。无论是用于智能推荐、自然语言处理还是图像识别，如何高效、稳定地将深度学习模型部署到…...
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: # 名…...
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： |--file2:|--fi…...
除了console.error，还有什么更好的错误处理方式？
除了 console.error，在 Vue 应用中进行更好的错误处理可以采用以下几种方式： 一、使用全局错误处理 Vue 的错误捕获在 Vue 2 中，可以使用 errorHandler 来捕获全局的错误： Vue.config.errorHandler = (err, vm, info) => {// 处理错误，例如记录日志logError(err, info…...
力扣.270. 最接近的二叉搜索树值(中序遍历思想)
文章目录 题目描述思路复杂度Code 题目描述 思路 遍历思想(利用二叉树的中序遍历) 本题的难点在于可能存在多个答案，并且要返回最小的那一个，为了解决这个问题，我门则要利用上二叉搜索树中序遍历为有序序列的特性，具体到代码中&a…...
Yageo国巨的RC系列0402封装1%电阻库来了
工作使用Cadence多年，很多时候麻烦的就是整理BOM，因为设计原理图的时候图省事，可能只修改value值和封装。 但是厂家，规格型号，物料描述等属性需要在最后的时候一行一行的修改，繁琐又容易出错，过…...
wait/notify/join/设计模式
JUC wait obj.wait() 让进入 object 监视器的线程到 waitSet 等待wait（）方法会释放对象的锁，进入 WaitSet 等待区，从而让其他线程就机会获取对象的锁。无限制等待，直到 notify 为止wait(long n）有时限的等…...
Windows Docker笔记-Docker拉取镜像
通过在前面的章节《安装docker》中，了解并安装成功了Docker，本章讲述如何使用Docker拉取镜像。 使用Docker，主要是想要创建并运行Docker容器，而容器又要根据Docker镜像来创建，那么首当其冲，必须要先有一个…...
七大排序思想
目录 七大排序的时间复杂度和稳定性 排序 插入排序 简单插入排序 希尔排序 选择排序 简单选择排序 堆排序 交换排序 冒泡排序 快速排序 快排的递归实现 hoare版本的快排 挖坑法的快排 双指针法的快排 快排的非递归 归并排序 归并的递归实现 归并的非递归实现…...
intra-mart实现简易登录页面笔记
一、前言 最近在学习intra-mart框架，在此总结下笔记。 intra-mart是一个前后端不分离的框架，开发时主要用的就是xml、html、js这几个文件； xml文件当做配置文件，html当做前端页面文件，js当做后端文件（js里…...
SpringBoot整合RocketMQ
前言 在当今快速发展的软件开发领域，构建高效、稳定的应用系统是每个开发者的追求。Spring Boot 作为一款极具影响力的开发框架，凭借其强大的自动化配置和便捷的开发特性，极大地简化了项目搭建过程。使用 Spring Boot，我们无需再…...
深入理解 YUV Planar 和色度二次采样 —— 视频处理的核心技术
深入理解 YUV Planar 和色度二次采样 —— 视频处理的核心技术 在现代视频处理和编码中，YUV 颜色空间和**色度二次采样（Chroma Subsampling）**是两个非常重要的概念。它们的结合不仅能够显著减少视频数据量，还能在保持较高视觉质量的同时优化存储和传输效率。而 YUV Plana…...
iOS开发效率工具：设备支持文件管理完全指南 - 无需升级Xcode的解决方案
iOS开发效率工具：设备支持文件管理完全指南 - 无需升级Xcode的解决方案 【免费下载链接】iOSDeviceSupport All versions of iOS Device Support 项目地址: https://gitcode.com/gh_mirrors/ios/iOSDeviceSupport 作为iOS开发者，你是否曾遭遇这样…...
Pixel Epic动态卷轴效果展示：从空白屏幕到完整研报的实时生成录屏
Pixel Epic动态卷轴效果展示：从空白屏幕到完整研报的实时生成录屏 1. 引言：当科研遇上像素冒险 在传统的研究报告撰写过程中，我们常常面对冰冷的界面和机械化的交互体验。Pixel Epic彻底改变了这一现状，将严肃的学术研究变成了一…...
抖音音频高效提取工具：从繁琐操作到一键解决方案
抖音音频高效提取工具：从繁琐操作到一键解决方案 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support. 抖…...
intv_ai_mk11 GPU算力优化部署：7B模型在CSDN GPU实例上的高效运行方案
intv_ai_mk11 GPU算力优化部署：7B模型在CSDN GPU实例上的高效运行方案 1. 项目背景与价值 intv_ai_mk11是基于Llama架构的7B参数AI对话模型，专为中文场景优化设计。在CSDN GPU实例上部署这类中型模型时，面临的主要挑战是如何在有限显存条件…...
HsMod：炉石传说功能增强插件的全方位优化方案
HsMod：炉石传说功能增强插件的全方位优化方案 【免费下载链接】HsMod Hearthstone Modify Based on BepInEx 项目地址: https://gitcode.com/GitHub_Trending/hs/HsMod HsMod是一款基于BepInEx框架开发的炉石传说功能增强插件，通过55项实用功能为…...
AI结对编程：与快马AI对话式迭代，智能优化你的系统ER图设计
AI结对编程：与快马AI对话式迭代，智能优化你的系统ER图设计 最近在做一个员工管理系统的数据库设计，发现ER图设计是个需要反复推敲的过程。传统方式下，每次修改都要手动调整图形，效率很低。直到尝试了InsCode(快马)平台…...
服务器很卡，是CC攻击造成的吗
之前有客户反馈，服务器有一段时间使用总是会遇到卡的情况，查看并无流量攻击的情况，程序也未进行过什么修改，用户人数也没有什么变化。来咨询是什么原因导致的。导致机器卡的情况，一般有带宽不够，硬件性能不…...
SEO_SEO优化常见误区及正确操作指南
SEO优化常见误区 在互联网时代，SEO（搜索引擎优化）已成为网站运营中不可或缺的一部分。很多人在实际操作中却常常犯下一些常见的SEO优化误区，这不仅影响了网站的流量，也可能导致搜索引擎的惩罚。下面我们将详细分析这些…...
Qwen2.5-VL图文助手体验：RTX 4090极速推理，支持对话历史和一键清空
Qwen2.5-VL图文助手体验：RTX 4090极速推理，支持对话历史和一键清空 如果你手头有一张RTX 4090显卡，想找一个能看懂图片、能聊天、还能帮你处理各种视觉任务的本地AI助手，那么今天要聊的这个工具，你可能会很感兴趣。 …...
淘宝虚拟商品选品实操：从儿童学习资料到游戏攻略的蓝海挖掘术
淘宝虚拟商品选品高阶指南：从儿童教育到游戏产业的精细化运营策略 在淘宝虚拟商品领域，真正能够持续盈利的卖家往往不是那些追逐热门品类的跟风者，而是懂得在细分市场中寻找差异化机会的"蓝海猎手"。儿童学习资料和游戏攻略这两个看…...