如何用js写一个页签-js教程-PHP中文网

如何用js写一个页签

小老鼠

发布： 2024-11-08 11:27:53

原创

902人浏览过

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

如何用js写一个页签

如何用 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. 创建内容区域
为每个页签创建一个对应的内容区域：

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

登录后复制

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）
移出所有内容区域的活动类
添加活动类到与被点击页签相对应的内容区域

示例
下面是一个示例：

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

登录后复制

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