【功能实现】卡片化标签页

介绍

选项卡功能在前端开发中特别常见，作为设置选项的模块，每个选项卡代表一个活动的区域，点击不同的区域，即可展现不同的内容，这样既能节约页面的空间又能提升页面性能。

本题需要在已提供的基础项目中使用 JS 完成选项卡功能的编码，最终实现切换选项卡可以显示对应内容的效果。

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

1
2
3
4
5
6
├── css
│   └── index.css # 页面样式文件
├── imgs # 静态图片
├── index.html # 页面布局
└── js
    └── index.js # 页面功能实现的逻辑代码

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果，当前显示仅有静态布局，并未实现选项卡切换功能。

初始效果图

目标

请在 index.js 文件中根据现有 DOM 结构（页面布局部分不能做任何修改操作）实现选项卡动态切换功能。

页面效果如下所示：

最终效果图

规定

  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
  • 满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

总通过次数: 2405 | 总提交次数: 2858 | 通过率: 84.1%

难度: 简单 标签: 2022, 省模拟赛, Web 前端, JavaScript

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 实现选项卡功能
function init() {
  // TODO 待补充代码
  const tabList = document.querySelectorAll('.tabs div')
  tabList.forEach((item,index) => {
    item.addEventListener('click', () => {
      document.querySelector('.tabs .active').classList.remove('active')
      document.querySelector('#content .active').classList.remove('active')
      item.classList.add('active')
      document.querySelectorAll('#content div')[index].classList.add('active')
    })
  })
}
init();