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

JavaScript实现tab栏切换

news 文章来源：https://blog.csdn.net/qq_45755863/article/details/144222977 2025/5/15 15:21:42

JavaScript实现tab栏切换

请添加图片描述

代码功能概述

这段代码实现了一个简单的选项卡（Tab）切换功能。它通过操作 HTML 元素的类名（class）来控制哪些选项卡（Tab）和对应的内容板块显示，哪些隐藏。基本思路是先移除所有选项卡和内容板块已有的“激活”类名，然后给指定的选项卡及其对应的内容板块添加“激活”类名，从而实现切换显示效果，并且初始默认显示第一个选项卡及其对应的内容。

代码详细解读

  1. 获取页面元素：
var tabs = document.querySelectorAll('.tab');
var contents = document.querySelectorAll('.tab-content');

这里使用 document.querySelectorAll 方法分别获取了页面中所有类名为 tab 的元素（通常代表选项卡按钮等）和所有类名为 tab-content 的元素（通常代表每个选项卡对应的内容展示区域），并将它们分别存储在 tabs 和 contents 变量中。

  1. 定义 showTab 函数：
function showTab(tabNumber) {tabs.forEach((tab) => {tab.classList.remove('active-tab');});contents.forEach((content) => {content.classList.remove('active-content');});document.getElementById('tab-' + tabNumber).classList.add('active-tab');document.getElementById('content-' + tabNumber).classList.add('active-content');
}

- 首先，函数接受一个参数 `tabNumber`，这个参数用于指定要显示的选项卡的序号（从代码逻辑推测，应该对应着 HTML 中选项卡和内容板块相关元素的编号部分）。
- 然后，通过 `forEach` 方法遍历之前获取到的所有 `tabs` 元素，对于每一个 `tab` 元素，使用 `classList.remove` 方法移除名为 `active-tab` 的类名，这样做的目的是将所有选项卡都设置为非激活状态，清除之前可能存在的激活样式等。
- 接着，同样使用 `forEach` 方法遍历 `contents` 元素，对每个 `content` 元素移除 `active-content` 类名，即将所有内容板块都设置为隐藏或非激活状态。
- 最后，通过 `document.getElementById` 方法，根据传入的 `tabNumber` 拼接出对应的选项卡和内容板块的 `id`（例如 `tab-1` 和 `content-1` 这样的形式），然后分别给对应的选项卡元素添加 `active-tab` 类名，给对应的内容板块元素添加 `active-content` 类名，从而实现将指定的选项卡和其对应的内容板块设置为激活状态并显示出来的效果。
  1. 初始显示设置：
showTab(1);

在脚本的最后调用了 showTab 函数并传入参数 1，这意味着页面加载时，默认会显示第一个选项卡（编号为 1 的选项卡及其对应的内容板块）处于激活状态。

可能的改进和注意事项

  1. 错误处理：代码没有对 document.getElementById 查找元素失败的情况进行处理，如果页面中不存在对应的 id 元素，代码会出现错误。可以添加适当的条件判断来避免这种情况，比如判断获取到的元素是否为 null，然后做相应的提示或处理。
  2. 动态添加元素情况：如果页面运行过程中会动态添加或删除选项卡及内容板块元素，那么 document.querySelectorAll 获取到的元素集合不会自动更新，可能导致后续切换功能出现异常。这时可能需要采用事件委托等方式来更好地处理元素变化情况。
  3. 可扩展性和灵活性：目前代码是基于固定的类名和 id 命名规则来实现功能的，如果想要更灵活地配置选项卡结构或者复用代码，可能需要将类名、id 相关的规则以及功能逻辑进一步封装成更可配置的形式，例如通过配置对象传入相关参数等。

总的来说，这段代码简洁地实现了选项卡切换的基本功能，但在实际应用中，根据具体的项目需求和页面交互情况，可能需要进一步优化和完善相关逻辑及错误处理机制。

<!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>.tabChange{width: 800px;height: auto;}.tabs{display: flex;}.tab{border: 1px solid #ccc;background-color: #f1f1f1;padding: 10px 20px;margin-right: 5px;cursor: pointer;}.tab-content{display: none !important;}.active-tab{background-color: #fff;border-bottom: none;}.active-content{display: flex !important;padding: 20px;}.col-img{margin-right: 30px;}.col-img > img{width: 200px;height: 200px;}.text >p{text-indent: 2em;}</style>
</head>
<body><div class="tabchange"><div class="tabs"><div class="tab active-tab"id="tab-1"onclick="showTab(1)">派大星</div><div class="tab" id="tab-2" onclick="showTab(2)">海绵宝宝</div><div class="tab" id="tab-3" onclick="showTab(3)">章鱼哥</div><div class="tab" id="tab-4" onclick="showTab(4)">蟹老板</div></div><div class="tab-content" id="content-1"><div class="col-img"><img src="C:\Users\Administrator\Desktop\python\.vs\ann.png" alt=""></div><div class="text"><h3>派大星</h3><p>派大星（Patrick Star），美国动画片《海绵宝宝》及其衍生作品中的角色，也是海绵宝宝的好朋友。他是一只粉红色的海星，说话嗓音粗，头脑简单，四肢发达，常给大家制造麻烦，在睡觉或发呆时还会不停的流口水。他居住在自己精心打磨的石头下面，在关键时刻会想出绝妙的点子，但下一秒就已经遗忘，可是在动画片中他却是说出最多饱含深意的话的角色。</p></div></div><div class="tab-content" id="content-2"><div class="col-img"><img src="C:\Users\Administrator\Desktop\python\.vs\ann.png" alt=""></div><div class="text"><h3>海绵宝宝</h3><p>海绵宝宝（SpongeBob SquarePants）是美国动画中的角色，原设计名为“海绵男孩”，首次登场于1999年美国同名动画《海绵宝宝》，人物原型为海绵，美国配音为汤姆·肯尼，中国大陆配音为陈浩、赵路、李璐、王沄晨，中国台湾配音为魏伯勤。</p></div></div><div class="tab-content"id="content-3"><div class="col-img"><img src="C:\Users\Administrator\Desktop\python\.vs\ann.png" alt=""></div><div class="text"><h3>章鱼哥</h3><p>蟹堡王的收银员，海绵宝宝的邻居兼同事、朋友，一只大鼻子秃脑门章鱼。认为海绵宝宝和派大星很幼稚。相当自恋，有一定的艺术才能但却从未得到赏识，并对艺术有执着的追求。</p></div></div><div class="tab-content"id="content-4"><div class="col-img"><img src="C:\Users\Administrator\Desktop\python\.vs\image (1).jpg" alt=""></div><div class="text"><h3>蟹老板</h3><p>蟹老板（英文：Captain Eugene H. Armor Abs Krabs），美国动画片《海绵宝宝》系列中的主要角色之一，全名“尤金·H·阿尔莫·阿博斯·蟹Eugene H. Armor Abs Krabs”，为蟹堡王的老板。原型是一只螃蟹。</p></div></div></div><script>// 获取所有具有 '.tab' 类的DOM元素（标签）var tabs = document.querySelectorAll('.tab');// 获取所有具有 '.tab-content' 类的DOM元素（内容区域）var contents = document.querySelectorAll('.tab-content');// 定义 showTab 函数，用于切换标签页function showTab(tabNumber) {// 遍历所有标签，移除 'active-tab' 类以去除激活状态tabs.forEach(function(tab) {tab.classList.remove('active-tab');});// 遍历所有内容区域，移除 'active-content' 类以隐藏内容contents.forEach(function(content) {content.classList.remove('active-content');});// 为指定的标签添加 'active-tab' 类以显示为激活状态document.getElementById('tab-' + tabNumber).classList.add('active-tab');// 为对应的内容区域添加 'active-content' 类以显示内容document.getElementById('content-' + tabNumber).classList.add('active-content');}// 页面加载完成后，默认显示第一个标签页的内容showTab(1);</script>
</body>
</html>

相关文章：

JavaScript实现tab栏切换

JavaScript实现tab栏切换 代码功能概述 这段代码实现了一个简单的选项卡&#xff08;Tab&#xff09;切换功能。它通过操作 HTML 元素的类名&#xff08;class&#xff09;来控制哪些选项卡&#xff08;Tab&#xff09;和对应的内容板块显示&#xff0c;哪些隐藏。基本思路是先…...

编程日记 2024/12/4 10:07:18

精确电压输出，家电和工业设备的完美选择，宽输入电压线性稳压器

WD5201线性稳压器的核心内容概述&#xff1a; 主要特点 • 高精度输出电压&#xff1a;2%精度。 • 输出电压可调&#xff1a;支持5V、3.3V、2.7V三档输出。 • 优化控制方式&#xff1a;提升效率。 • 宽输入电压范围&#xff1a;80305VAC。 • 无需功率电感和输入高压电…...

编程日记 2024/12/4 10:06:16

深入理解定时器：优先队列与时间轮实现

文章目录 1. 线程池概述线程池的基本特点&#xff1a; 2. 使用线程池的优先队列定时器实现2.1 优先队列定时器实现2.2 解释&#xff1a; 3. 使用时间轮的线程池定时器实现3.1 时间轮定时器实现 4. 总结 在定时器设计中&#xff0c;使用线程池来执行定时任务可以有效提高程序的性…...

编程日记 2024/12/4 10:05:14

autogen-agentchat 0.4.0.dev8版本的安装

1. 安装命令 pip install autogen-agentchat0.4.0.dev8 autogen-ext[openai]0.4.0.dev82. 版本检查 import autogen_agentchat print(autogen_agentchat.__version__)0.4.0.dev8import autogen_ext print(autogen_ext.__version__)0.4.0.dev83. 第一个案例 使用 autogen-age…...

编程日记 2024/12/4 10:04:13

JAVA ｜日常开发中读写XML详解

JAVA &#xff5c;日常开发中读写XML详解 前言一、XML 简介二、在 Java 中读取 XML2.1 使用 DOM&#xff08;Document Object Model&#xff09;方式读取 XML2.2 使用 SAX&#xff08;Simple API for XML&#xff09;方式读取 XML 三、在 Java 中写入 XML3.1 使用 DOM 方式写入…...

编程日记 2024/12/4 10:03:12

React 路由与组件通信：如何实现路由参数、查询参数、state和上下文的使用

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2024/12/4 10:01:09

帮我写一篇关于AI搜索网页上编写的文章是否存在版权问题的文章, 字数在 3000 字左右。文心一言提问, 记录后用.

AI搜索网页上编写的文章是否存在版权问题&#xff1f; 在当今科技飞速发展的时代&#xff0c;AI搜索工具如雨后春笋般涌现&#xff0c;为人们获取信息提供了极大的便利。然而&#xff0c;随之而来的问题是&#xff0c;AI搜索案例中常常出现很多内容缺乏依据&#xff0c;这引发…...

编程日记 2024/12/4 9:57:06

电脑关机的趣味小游戏——system函数、strcmp函数、goto语句的使用

文章目录 前言一. system函数1.1 system函数清理屏幕1.2 system函数暂停运行1.3 system函数电脑关机、重启 二、strcmp函数三、goto语句四、电脑关机小游戏4.1. 程序要求4.2. 游戏代码 总结 前言 今天我们写一点稍微有趣的代码&#xff0c;比如写一个小程序使电脑关机&#xf…...

编程日记 2024/12/4 9:54:01

AttributeError: ‘DataFrame‘ object has no attribute ‘append‘的参考解决方法

文章目录 写在前面一、问题描述二、解决方法参考链接 写在前面 自己的测试环境&#xff1a; Ubuntu20.04 一、问题描述 运行开源的python代码的时候&#xff0c;遇到如下问题 AttributeError: DataFrame object has no attribute append二、解决方法 报错中的DataFrame是在…...

编程日记 2024/12/4 9:52:58

java垃圾回收机制介绍

Java垃圾回收机制&#xff08;Garbage Collection, GC&#xff09;是Java编程语言中的一项重要特性&#xff0c;它自动管理内存&#xff0c;释放不再使用的对象 1. 堆&#xff08;Heap&#xff09;&#xff1a; • Java虚拟机&#xff08;JVM&#xff09;中用于存储对象实例的内…...

编程日记 2024/12/4 9:46:49

SpringMVC跨域问题解决方案

当Web应用程序尝试从一个源&#xff08;例如 http://localhost:9090&#xff09;向另一个不同的源&#xff08;例如 http://localhost:8080&#xff09;发起请求时&#xff0c;发现报错&#xff1a; 报错原因&#xff1a;请求被CORS策略拦截了 跨域问题概述 当Web应用程序尝试…...

编程日记 2024/12/4 9:44:46

【语音识别】Zipformer

Zipformer 是kaldi 团队于2024研发的序列建模模型。相比较于 Conformer、Squeezeformer、E-Branchformer等主流 ASR 模型&#xff0c;Zipformer 具有效果更好、计算更快、更省内存等优点。并在 LibriSpeech、Aishell-1 和 WenetSpeech 等常用数据集上取得了当时最好的 ASR 结果…...

编程日记 2024/12/4 9:42:43

vue+uniapp+echarts的使用（H5环境下echarts）

1.安装 npm install echarts4.9.0 --save // 带版本号 2.main.js中全局引用 // import echarts from echarts // 如果是5.0以上版本用这个 import * as echarts from echarts Vue.prototype.$echartsecharts 3.使用 <template><view id"box" style"w…...

编程日记 2024/12/4 9:41:42

【Python网络爬虫笔记】7-网络爬虫的搜索工具re模块

目录 一、网络爬虫中的正则表达式和re模块&#xff08;一&#xff09;数据提取的精确性&#xff08;二&#xff09;处理复杂的文本结构&#xff08;三&#xff09;提高数据处理效率 二、正则表达式的内涵&#xff08;一&#xff09;、常用元字符&#xff08;二&#xff09;、量…...

编程日记 2024/12/4 9:40:39

为什么选择 React Native 作为跨端方案

为什么选择 React Native 作为跨端方案 我深刻地知道&#xff0c;没有完美的跨端技术&#xff0c;只有适合的场景。脱离适用场景去谈跨端技术没有什么意义。 适用场景 1. 业务更新迭代较快的团队与出海团队 React Native 特别适合那些业务更新频繁、需要快速响应市场的团队…...

编程日记 2024/12/4 9:38:37

服务器与普通电脑有什么区别？

服务器和普通电脑&#xff08;通常指的是个人计算机&#xff0c;即PC&#xff09;有众多相似之处&#xff0c;主要构成包含&#xff1a;CPU&#xff0c;内存&#xff0c;芯片&#xff0c;I/O总线设备&#xff0c;电源&#xff0c;机箱及操作系统软件等&#xff0c;鉴于使用要求…...

编程日记 2024/12/4 9:36:33

Oracle 12c Data Guard 环境中的 GAP 修复方法

概述 上文中提到Oracle 12c 引入了多项新技术来简化 Data Guard 环境中的 GAP 修复过程&#xff0c;如&#xff08;RECOVER … FROM SERVICE&#xff09;。这些新特性不仅减少了操作步骤&#xff0c;还提高了效率和准确性。本文档将详细说明如何利用这些新特性进行 GAP 修复。…...

编程日记 2024/12/4 9:32:28

力扣 三角dp

动态规划基础题&#xff0c;当前所在元素来自上一行的两列的值。 题目 从图可以看出&#xff0c;每一行的第一个数与最后一个数都是1&#xff0c;然后中间的数是来自它左上方和右上方的数的和。当然并不是要打印这个三角形的形状&#xff0c;因此可以想到正常的打印方式应该是…...

编程日记 2024/12/4 9:30:25

SQL基础语法全解析（上篇）

一、基本概念 1. 数据库术语 数据库&#xff08;database&#xff09; - 保存有组织的数据的容器&#xff08;通常是一个文件或一组文件&#xff09;。数据表&#xff08;table&#xff09; - 某种特定类型数据的结构化清单。模式&#xff08;schema&#xff09; - 关于数据库…...

编程日记 2024/12/4 9:25:17

【笔记】Linux服务器端使用百度网盘

1、在python环境下&#xff0c;下载bypy pip install bypy 2、第一次连接需要认证 bypy info 认证通过后百度网盘会出现bypy文件夹&#xff0c;如下 3、查看当前文件夹下的文件 bypy list 若有很多文件夹&#xff0c;可在后面增加文件夹名称&#xff0c;列出对应位置下的文件&a…...

编程日记 2024/12/4 9:24:11

UEFI Spec 学习笔记---3 - Boot Manager(3)

3.2 Boot Manager Policy Protocol EFI_BOOT_MANAGER_POLICY_PROTOCOL----EFI应用程序使用该协议请求UEFI引导管理器使用平台策略连接设备。 typedef struct _EFI_BOOT_MANAGER_POLICY_PROTOCOL EFI_BOOT_MANAGER_POLICY_PROTOCOL; struct _EFI_BOOT_MANAGER_POLICY_PROTOCOL…...

编程日记 2024/12/4 9:22:09

ATTCK红队评估实战靶场(四)

靶机链接&#xff1a;http://vulnstack.qiyuanxuetang.net/vuln/detail/6/ 环境搭建 新建两张仅主机网卡&#xff0c;一张192.168.183.0网段&#xff08;内网网卡&#xff09;&#xff0c;一张192.168.157.0网段&#xff08;模拟外网网段&#xff09;&#xff0c;然后按照拓补…...

编程日记 2024/12/4 9:21:08

Android Studio 历史版本下载

Android Studio 历史版本下载 官方链接&#xff1a;https://developer.android.google.cn/studio/archive 通过gradle插件版本反查Android Studio历史版本 Android Studio Ladybug | 2024.2.1 October 1, 2024 【https://redirector.gvt1.com/edgedl/android/studio/ide-zip…...

编程日记 2024/12/4 9:19:01

微信小程序px和rpx单位互转方法

js代码如下 Page({data: {width: 0,width2: 0},onLoad: function (options) {let px this.pxToRpx(380)let rpx this.rpxToPx(730.7692307692307) // 检查两个互转是否是相同即可,例如pxToRpx(380)转成730.7692307692307 则rpxToPx(730.7692307692307)如果是380则代表互转没…...

编程日记 2024/12/4 9:16:58

Vercel 部署与管理指南：简化前端应用的自动化部署流程

引言 在现代的前端开发中&#xff0c;部署和托管项目一直是开发者关注的重要环节。Vercel&#xff0c;作为一个专注于简化前端开发和部署的平台&#xff0c;凭借其强大的自动化功能、全球内容分发网络&#xff08;CDN&#xff09;以及对 Next.js 等框架的优越支持&#xff0c;…...

编程日记 2024/12/4 9:13:51

Java11使用JVM同一日志框架启用日志记录

你可以使用-Xlog选项配置或启用Java虚拟机同一日志框架的日志记录。 -Xlog:gc*trace:file/Users/xx/gc-%t.log:time,tags,level,pid,tid,hostname,path:filecount3,filesize10K -Xlog:gc*trace:stdout:time,tags,level,pid,tid,hostname:filecount3,filesize10K -Xlog:gc*trac…...

编程日记 2024/12/4 9:12:45

onlyoffice实现文档比对(Beta版)-纯文字比对(非OCR)

一、说明 文档比对光靠前端或者后端是无法实现的。 该文中的实现方案为&#xff1a;onlyofficejava。java进行文档差异化比较并输出对比结果&#xff0c;only进行得到结果处理渲染。 此方案目前为Beta版本&#xff0c;简单Word Demo实现了比对结果。css、关联动态效果登将在后期…...

编程日记 2024/12/4 9:08:40

JS querySelector方法的优点

1. 灵活性 支持所有 CSS 选择器 ID 选择器&#xff1a;#id 示例&#xff1a;document.querySelector(#myId)解释&#xff1a;选择 id 为 myId 的元素。类选择器&#xff1a;.class 示例&#xff1a;document.querySelector(.myClass)解释&#xff1a;选择具有 class 为 myCla…...

编程日记 2024/12/4 9:06:38

利用获取商品详情API：item_get可以获取到淘宝商品详情的哪些数据？

先来看下测试的返回数据吧 items: { total_results: 76, totalpage: 8, page_size: 10, page: "1", item: [ { rate_content: "和我家的鞋柜特别搭&#xff0c;加上这一条遮挡布&#xff0c;感觉整洁多了&#xff0c;布料不是硬邦邦的那种&#xff0c;很满意。…...

编程日记 2024/12/4 9:01:32

【大数据学习 | 面经】Spark 3.x 中的AQE（自适应查询执行）

Spark 3.x 中的自适应查询执行&#xff08;Adaptive Query Execution&#xff0c;简称 AQE&#xff09;通过多种方式提升性能&#xff0c;主要包括以下几个方面&#xff1a; 动态合并 Shuffle 分区&#xff08;Coalescing Post Shuffle Partitions&#xff09;&#xff1a; 当 …...

编程日记 2024/12/4 9:00:31