如何用js写一个页签

使用 javascript 创建页签引言：1. 创建页签元素：使用 html 创建页签元素，例如“ tab 1”。2. 创建内容区域：为每个页签创建一个相应的内容区域，例如“content for tab 1

如何用 JavaScript 编写一个页签

引言
页签是一种常见的网站元素，允许用户轻松地在不同内容部分之间切换。使用 JavaScript 可以轻松地创建页签。

步骤

1. 创建页签元素
使用 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>

登录后复制

2. 创建内容区域
为每个页签创建一个对应的内容区域：

<p id="tab1">Content for Tab 1</p>
<p id="tab2">Content for Tab 2</p>
<p id="tab3">Content for Tab 3</p>

登录后复制

3. 添加 JavaScript 代码
使用以下 JavaScript 代码来切换页签：

const tabs = document.querySelectorAll('#tabs li');
const content = document.querySelectorAll('p[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）
• 移出所有内容区域的活动类
• 添加活动类到与被点击页签相对应的内容区域

示例
下面是一个示例：

<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>

<p id="tab1">Content for Tab 1</p>
<p id="tab2">Content for Tab 2</p>
<p id="tab3">Content for Tab 3</p>

<script>
// 代码同前
</script>

登录后复制

以上就是如何用js写一个页签的详细内容，更多请关注抖狐科技其它相关文章！