如何用JS制作一个基础的Tab标签页切换效果？

本文共计1373个文字，预计阅读时间需要6分钟。

原文示例代码：javascript// 简单Tab切换的实现// 大家分享了JS实现简单Tab切换的具体代码，供大家参考。具体内容如下：

// HTML结构// // Tab 1// Tab 2// // 内容1// 内容2

// CSS样式// .tab { display: inline-block; padding: 10px; cursor: pointer; }// .content { display: none; }

// JavaScript代码// document.querySelectorAll('.tab').forEach(tab=> {// tab.addEventListener('click', ()=> {// const target=document.querySelector(tab.dataset.target);// document.querySelectorAll('.tab').forEach(t=> t.classList.remove('active'));// document.querySelectorAll('.content').forEach(c=> c.style.display='none');// tab.classList.add('active');// target.style.display='block';// });// });

要求：当鼠标点击上面对应的选项卡（tab）时，下面页面的内容也随之一一改变。

结构分析：+ 整体结构包括HTML、CSS和JavaScript三个部分。+ HTML部分定义了Tab切换的按钮和对应的内容区域。+ CSS部分设置了Tab按钮的样式和内容的显示与隐藏。