蓝桥杯练习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;
}
#content div {
  position: absolute;
  width: 440px;
  height: 400px;
  overflow: hidden;
  background-color: white;
  border: 1px solid #dddddd;
  padding: 20px 30px;
  text-align: center;
}
#content img {
  display: inline-block;
  max-height: 240px;
  margin: 10px auto;
}
#content p {
  word-break: break-all;
  text-align: left;
  padding: 20px 0 10px 0;
}
.active {
  z-index: 99;
  background: white;
  border: 1px solid #dddddd;
  border-bottom: none;
}

.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>选项卡切换</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
  </head>
  <body>
    <div id="main">
      <div class="tabs">
        <div class="red active">选项一</div>
        <div class="green">选项二</div>
        <div class="blue">选项三</div>
        <div class="yellow">选项四</div>
      </div>
      <div id="content">
        <div id="one" class="active">
          <p>
            爱情要完结的时候自会完结，到时候，你不想画上句号也不行。爱情，原来是含笑饮毒酒。
          </p>
          <img src="./imgs/1.jpeg" />
        </div>
        <div id="two">
          <p>
            在这个光怪陆离的人间，没有谁可以将日子过的行云流水。但我始终相信，走过平湖山雨，岁月山河，那些历尽劫数，尝遍百味的人，会更加生动而干净。
          </p>
          <img src="./imgs/2.jpeg" />
        </div>
        <div id="three">
          <p>
            对于三十岁以后的人来说，十年八年不过是指缝间的事，而对于年轻人而言，三年五年就可以是一生一世。
          </p>
          <img src="./imgs/3.jpeg" />
        </div>
        <div id="four">
          <p>
            我要你知道，在这个世界上总有一个人是等着你的，不管在什么时候，不管在什么地方，反正你知道，总有这么个人。
          </p>
          <img src="./imgs/4.jpeg" />
        </div>
      </div>
    </div>
  </body>
  <script src="./js/index.js" type="text/javascript" charset="utf-8"></script>
</html>

.js

// 实现选项卡功能
function init() {
    // TODO 待补充代码

}
init();

答案

// 实现选项卡功能
function init() {
    // TODO 待补充代码
    //1、获取所有tabs标签
    const tabs = document.querySelectorAll('.tabs div')
	//2、获取所有content内容
    const content = document.querySelectorAll('#content div')
    //3、遍历4个tab
    for (let index = 0; index < tabs.length; index++) {
        tabs[index].onclick = function() {
            for (let i = 0; i < tabs.length; i++) {
                //4、通过移除active样式取消霄宫
                tabs[i].classList.remove('active')
                content[i].classList.remove('active')
            }
            //5、对当前激活标签添加active样式
            this.classList.add('active')
            content[index].classList.add('active')
        }
    }

}
init();