蓝韵官方网站,海外酒店 网站建设,商洛做网站的公司电话,建公司网站外贸JavaScript实现tab栏切换 代码功能概述
这段代码实现了一个简单的选项卡#xff08;Tab#xff09;切换功能。它通过操作 HTML 元素的类名#xff08;class#xff09;来控制哪些选项卡#xff08;Tab#xff09;和对应的内容板块显示#xff0c;哪些隐藏。基本思路是先…JavaScript实现tab栏切换 代码功能概述
这段代码实现了一个简单的选项卡Tab切换功能。它通过操作 HTML 元素的类名class来控制哪些选项卡Tab和对应的内容板块显示哪些隐藏。基本思路是先移除所有选项卡和内容板块已有的“激活”类名然后给指定的选项卡及其对应的内容板块添加“激活”类名从而实现切换显示效果并且初始默认显示第一个选项卡及其对应的内容。
代码详细解读
获取页面元素
var tabs document.querySelectorAll(.tab);
var contents document.querySelectorAll(.tab-content);这里使用 document.querySelectorAll 方法分别获取了页面中所有类名为 tab 的元素通常代表选项卡按钮等和所有类名为 tab-content 的元素通常代表每个选项卡对应的内容展示区域并将它们分别存储在 tabs 和 contents 变量中。
定义 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 类名从而实现将指定的选项卡和其对应的内容板块设置为激活状态并显示出来的效果。初始显示设置
showTab(1);在脚本的最后调用了 showTab 函数并传入参数 1这意味着页面加载时默认会显示第一个选项卡编号为 1 的选项卡及其对应的内容板块处于激活状态。
可能的改进和注意事项
错误处理代码没有对 document.getElementById 查找元素失败的情况进行处理如果页面中不存在对应的 id 元素代码会出现错误。可以添加适当的条件判断来避免这种情况比如判断获取到的元素是否为 null然后做相应的提示或处理。动态添加元素情况如果页面运行过程中会动态添加或删除选项卡及内容板块元素那么 document.querySelectorAll 获取到的元素集合不会自动更新可能导致后续切换功能出现异常。这时可能需要采用事件委托等方式来更好地处理元素变化情况。可扩展性和灵活性目前代码是基于固定的类名和 id 命名规则来实现功能的如果想要更灵活地配置选项卡结构或者复用代码可能需要将类名、id 相关的规则以及功能逻辑进一步封装成更可配置的形式例如通过配置对象传入相关参数等。
总的来说这段代码简洁地实现了选项卡切换的基本功能但在实际应用中根据具体的项目需求和页面交互情况可能需要进一步优化和完善相关逻辑及错误处理机制。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
bodydiv classtabchangediv classtabsdiv classtab active-tabidtab-1onclickshowTab(1)派大星/divdiv classtab idtab-2 onclickshowTab(2)海绵宝宝/divdiv classtab idtab-3 onclickshowTab(3)章鱼哥/divdiv classtab idtab-4 onclickshowTab(4)蟹老板/div/divdiv classtab-content idcontent-1div classcol-imgimg srcC:\Users\Administrator\Desktop\python\.vs\ann.png alt/divdiv classtexth3派大星/h3p派大星Patrick Star美国动画片《海绵宝宝》及其衍生作品中的角色也是海绵宝宝的好朋友。他是一只粉红色的海星说话嗓音粗头脑简单四肢发达常给大家制造麻烦在睡觉或发呆时还会不停的流口水。他居住在自己精心打磨的石头下面在关键时刻会想出绝妙的点子但下一秒就已经遗忘可是在动画片中他却是说出最多饱含深意的话的角色。/p/div/divdiv classtab-content idcontent-2div classcol-imgimg srcC:\Users\Administrator\Desktop\python\.vs\ann.png alt/divdiv classtexth3海绵宝宝/h3p海绵宝宝SpongeBob SquarePants是美国动画中的角色原设计名为“海绵男孩”首次登场于1999年美国同名动画《海绵宝宝》人物原型为海绵美国配音为汤姆·肯尼中国大陆配音为陈浩、赵路、李璐、王沄晨中国台湾配音为魏伯勤。/p/div/divdiv classtab-contentidcontent-3div classcol-imgimg srcC:\Users\Administrator\Desktop\python\.vs\ann.png alt/divdiv classtexth3章鱼哥/h3p蟹堡王的收银员海绵宝宝的邻居兼同事、朋友一只大鼻子秃脑门章鱼。认为海绵宝宝和派大星很幼稚。相当自恋有一定的艺术才能但却从未得到赏识并对艺术有执着的追求。/p/div/divdiv classtab-contentidcontent-4div classcol-imgimg srcC:\Users\Administrator\Desktop\python\.vs\image (1).jpg alt/divdiv classtexth3蟹老板/h3p蟹老板英文Captain Eugene H. Armor Abs Krabs美国动画片《海绵宝宝》系列中的主要角色之一全名“尤金·H·阿尔莫·阿博斯·蟹Eugene H. Armor Abs Krabs”为蟹堡王的老板。原型是一只螃蟹。/p/div/div/divscript// 获取所有具有 .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
