使用 JavaScript 创建页签引言：1. 创建页签元素：使用 HTML 创建页签元素，例如“ Tab 1”。2. 创建内容区域：为每个页签创建一个相应的内容区域，例如“Content for Tab 1
如何用 JavaScript 编写一个页签
引言
页签是一种常见的网站元素，允许用户轻松地在不同内容部分之间切换。使用 JavaScript 可以轻松地创建页签。
步骤
1. 创建页签元素
使用 HTML 创建页签元素：
2. 创建内容区域
为每个页签创建一个对应的内容区域：
Content for Tab 1Content for Tab 2Content for Tab 3
3. 添加 JavaScript 代码
使用以下 JavaScript 代码来切换页签：
const tabs = document.querySelectorAll('#tabs li');
const content = document.querySelectorAll('div[id^="tab"]');
tabs.forEach((tab) => {
tab.addEventListener('click', (e) => {
const tabId = e.target.getAttribute('href');
tabs.forEach((tab) => tab.classList.remove('active'));
tab.classList.add('active');
content.forEach((c) => c.classList.remove('active'));
document.querySelector(tabId).classList.add('active');
});
});工作原理
代码使用以下步骤创建页签：
- 查找页面上的所有页签元素（
querySelector） - 为每个页签元素设置一个事件监听器，该监听器在点击时触发（
addEventListener） - 获取被点击页签的链接（
getAttribute） - 移出所有页签的活动类（
classList.remove） - 添加活动类到被点击的页签（
classList.add） - 移出所有内容区域的活动类
- 添加活动类到与被点击页签相对应的内容区域
示例
下面是一个示例：
Content for Tab 1
Content for Tab 2
Content for Tab 3
