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

如何用js写一个页签

小老鼠

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

原创

958人浏览过

使用 JavaScript 创建页签引言：1. 创建页签元素：使用 HTML 创建页签元素，例如“<ul id="tabs"> <li><a href="#tab1">Tab 1</a></li></ul>”。2. 创建内容区域：为每个页签创建一个相应的内容区域，例如“<div id="tab1">Content for Tab 1</div>

如何用js写一个页签

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

东盟商机最新AC版As2007 SP1

AS系统本次的主要更新和新开发的功能如下（暂不详述）： 1、修复了普及版的一些大大小小的BUG 2、重新规划整个后台，使后台更加个性化、智能化、更加易用 3、重写了广告部分模块，使其更加专业化 4、重写了文章采集模块，添加了定时自动采集功能 5、添加了供求信息采集功能 6、重写了友情连接功能（原来的太简单了） 8、重写了生成HTML模块。（几个主要模块首页不用原来的生成方式，不再会被卡巴斯机杀毒软

查看详情

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

登录后复制

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