使用 JavaScript 创建页签引言：1. 创建页签元素：使用 HTML 创建页签元素，例如“<ul id="tabs"> <li><a href="#tab1">Tab 1</a></li></ul>”。2. 创建内容区域：为每个页签创建一个相应的内容区域，例如“<div id="tab1">Content for Tab 1</div>
如何用 JavaScript 编写一个页签
引言
页签是一种常见的网站元素，允许用户轻松地在不同内容部分之间切换。使用 JavaScript 可以轻松地创建页签。
步骤
1. 创建页签元素
使用 HTML 创建页签元素：
<code class="html"><ul id="tabs"> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul></code>
2. 创建内容区域
为每个页签创建一个对应的内容区域：
<code class="html"><div id="tab1">Content for Tab 1</div> <div id="tab2">Content for Tab 2</div> <div id="tab3">Content for Tab 3</div></code>
3. 添加 JavaScript 代码
使用以下 JavaScript 代码来切换页签：
<code class="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');
});
});</code>工作原理
代码使用以下步骤创建页签：
- 查找页面上的所有页签元素（
querySelector） - 为每个页签元素设置一个事件监听器，该监听器在点击时触发（
addEventListener） - 获取被点击页签的链接（
getAttribute） - 移出所有页签的活动类（
classList.remove） - 添加活动类到被点击的页签（
classList.add） - 移出所有内容区域的活动类
- 添加活动类到与被点击页签相对应的内容区域
示例
下面是一个示例：
<code class="html"><ul id="tabs"> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div id="tab1">Content for Tab 1</div> <div id="tab2">Content for Tab 2</div> <div id="tab3">Content for Tab 3</div> <script> // 代码同前 </script></code>
