蓝桥杯练习01卡片化标签

卡片化标签页

介绍

选项卡功能在前端开发中特别常见，作为设置选项的模块，每个选项卡代表一个活动的区域，点击不同的区域，即可展现不同的内容，这样既能节约页面的空间又能提升页面性能。
本题需要在已提供的基础项目中使用JS完成选项卡功能的编码，最终实现切换选项卡可以显示对应内容的效果。

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

其中：
·css/index.css是页面样式文件。
·js/index.js是页面功能实现的逻辑代码。
·index.html是页面布局。
在刘览器中预览index.html页面效果如下：

目标

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

规定

请勿修改本题默认项目代码文件夹中的文件名称、文件夹路径等，否则会导致考试系统无法正常评分。

代码

.css

* {
   
   
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
   
   
  background: #f5f5f5;
}
#main {
   
   
  width: 440px;
  margin: 30px auto;
  position: relative;
  height: 450px;
}
.tabs {
   
   
  width: 440px;
  height: 50px;
  line-height: 50px;
  display: flex;
  /* list-style: none; */
  /* text-align: left; */
  /* margin: 0; */
  /* padding: 0; */
  margin-bottom: -1px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}
.tabs div {
   
   
  text-align: center;
  cursor: pointer;
  width: 110px;
}

#content {
   
   
  position: absolute;
  width: 440px;
  height: 400px;
  overflow: hidden;
  margin: 49px auto;