如何为导航项动态添加和移除 active 类并同步控制内容面板显隐

霞舞

发布时间：2026-01-07 19:29:01

315人浏览过

来源于php中文网

原创

如何为导航项动态添加和移除 active 类并同步控制内容面板显隐

本文详解如何通过原生 javascript 实现点击 `

` 时自动为对应按钮添加 `active` 类、移除其他按钮的 `active` 类，并同步切换关联的 `.tab-pane` 内容区的 `show active` 状态，兼容 bootstrap 5 的 tab 交互逻辑。

在使用 Bootstrap 5 的 Tabs 组件时，虽然 data-bs-toggle="tab" 能自动处理切换逻辑，但有时需手动控制激活状态（例如：自定义事件、AJAX 加载后重置状态、或与非标准 DOM 结构集成）。此时，仅靠 Bootstrap 默认行为可能无法满足需求——比如你希望点击

触发而非

所有 .tab-pane 初始状态可为 fade + show active（首个默认展开），其余为 fade（无需 show active）。

示例片段（保持不变）：


...

...

✅ 步骤三：可选增强 —— CSS 样式微调（提升体验）

/* 确保 nav-link 在 active 时视觉突出 */
.nav-link.active {
  border-bottom: 2px solid #0d6efd;
  font-weight: 600;
}

/* 可选：为 tab-pane 添加淡入过渡 */
.tab-pane {
  transition: opacity 0.2s ease-in-out;
}
.tab-pane.show {
  opacity: 1;
}
.tab-pane:not(.show) {
  opacity: 0;
}

⚠️ 注意事项

不要混用 Bootstrap JS 与手动逻辑：若同时引入 bootstrap.bundle.js 并启用 data-bs-toggle，可能造成事件冲突。推荐：禁用默认行为（移除 data-bs-toggle="tab"），完全交由上述脚本控制。
ID 唯一性必须严格保证：data-bs-target 指向的 ID 必须存在于 DOM 中且不重复。
动态内容场景：若 .tab-pane 是后续 AJAX 插入的，需在插入后调用 initTabHandlers() 函数重新绑定（可封装为可复用函数）。

✅ 总结

该方案以最小侵入方式实现了「点击导航项 → 高亮按钮 + 显示对应内容」的核心需求，兼顾语义化、可访问性与可维护性。无需 jQuery，纯原生 ES6+ 语法，适配现代浏览器及 Bootstrap 5 生态。调试时可通过浏览器开发者工具实时观察 class 和 aria-* 属性变化，快速验证逻辑正确性。

如何让 jqGrid 自定义列样式在行选中时自动继承高亮色

如何让 jqGrid 中自定义样式的列在行选中时自动继承高亮颜色

如何让 jqGrid 中自定义样式的列在行选中时自动继承高亮色

如何让 jqGrid 中自定义样式的列在行选中时继承高亮状态颜色

php静态网页设计能否使用Flexbox布局_php静态网页设计Flexbox布局应用【指南】

相关标签:

css javascript es6 java jquery html js bootstrap ajax 浏览器工具 JavaScript jquery css ajax bootstrap html es6 封装 class JS 事件 dom ul li

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何在 Rancher 中实现 Workload 间基于 DNS 的服务通信下一篇：PHP中substr()失效？揭秘字符串截取的常见陷阱与正确解法

作者最新文章

人脸识别技术：原理、应用与未来发展趋势

2026-01-08 11:08

2024 年虚拟助理必备工具终极指南：效率提升与技能升级

2026-01-08 11:08

Google AI Studio：Gemini赋能的零代码AI应用开发平台

2026-01-08 11:08

天天基金如何关闭消息推送

2026-01-08 11:10

《medibang paint》高斯模糊使用教程

2026-01-08 11:16

大学面试技巧：如何完美回答“你为什么选择这所大学？”

2026-01-08 11:17

墨墨背单词如何重置数据

2026-01-08 11:22

AI GIF动画制作指南：轻松打造个性化社交媒体内容

2026-01-08 11:26

Azure 视频分析器：赋能 AI 的智能视频分析解决方案

2026-01-08 11:27

如何对字典按键排序，并对其值中的嵌套列表按首元素升序排列

2026-01-08 11:29

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

js获取数组长度的方法

在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。

547

2023.06.20

js刷新当前页面

js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

373

2023.07.04

js四舍五入

js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

730

2023.07.04

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

472

2023.09.01

JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。

394

2023.09.04

js生成随机数的方法

js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。

655

2023.09.12

Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。

550

2023.09.20