【Html.js——标签导航栏】卡片化标签页（蓝桥杯真题-1765）【合集】

介绍

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

准备

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

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

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

目标

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

规定

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

通关代码✔️

function init() {
  let items = document.querySelectorAll(".tabs div");
  let content = document.querySelectorAll("#content div");
  items.forEach((item, index) => {
    item.onclick = () => {
      items.forEach(item => item.classList.remove("active"));
      content.forEach(contentItem => contentItem.classList.remove("active"));
      item.classList.add("active");
      content[index].classList.add("active");
    };
  });
}
init();

代码解析📑

1. 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="active">选项一</div>
        <div class="">选项二</div>
        <div class="">选项三</div>
        <div class="">选项四</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>

解释：

• <!DOCTYPE html>：声明该文档是一个 HTML5 文档。
• <html>：HTML 文档的根元素。
• <head>：包含元数据和资源引用。
  • <meta charset="utf-8" />：设置字符编码为 UTF-8，确保能正确显示各种字符。
  • <title>选项卡切换</title>：定义页面的标题。
  • <link rel="stylesheet" type="text/css" href="./css/index.css" />：引入外部的 CSS 文件 index.css 来为页面添加样式。
• <body>：文档的主体部分。
  • <div id="main">：页面的主容器，将选项卡和内容部分包裹在一起。
  • <div class="tabs">：选项卡的容器。
    • <div class="active">选项一</div> 等：每个选项卡元素，其中 active 类表示该选项卡初始处于激活状态。
  • <div id="content">：内容的容器。
    • <div id="one" class="active"> 等：每个内容元素，与选项卡一一对应，active 类表示该内容初始处于显示状态。
    • <p> 元素：包含文本内容。
    • <img> 元素：显示图片。
  • <script src="./js/index.js" type="text/javascript" charset="utf-8"></script>：引入外部的 JavaScript 文件 index.js 用于实现选项卡的交互功能。

2. 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;
    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;
}

解释：

• * 选择器：
  • padding: 0; margin: 0; box-sizing: border-box;：将所有元素的内边距和外边距设置为 0，并使用 box-sizing: border-box 确保元素的宽度和高度包含内边距和边框。
• body 选择器：
  • background: #f5f5f5;：设置页面的背景颜色为浅灰色。
• #main 选择器：
  • width: 440px; margin: 30px auto;：将主容器居中，宽度为 440px，上下外边距为 30px。
  • position: relative; height: 450px;：设置相对定位和高度。
• .tabs 选择器：
  • width: 440px; height: 50px; line-height: 50px;：设置选项卡容器的尺寸和行高。
  • display: flex;：使用 Flex 布局，使选项卡元素水平排列。
  • margin-bottom: -1px; position: absolute; top: 0; left: 0; z-index: 999;：将选项卡容器定位在顶部，使用 z-index 使其在内容之上。
• .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;：为激活元素设置较高的 z-index，背景颜色，边框并去除底部边框，使其在最上面显示。

3. JavaScript 部分

function init() {
  let items = document.querySelectorAll(".tabs div");
  let content = document.querySelectorAll("#content div");
  items.forEach((item, index) => {
    item.onclick = () => {
      items.forEach(item => item.classList.remove("active"));
      content.forEach(contentItem => contentItem.classList.remove("active"));
      item.classList.add("active");
      content[index].classList.add("active");
    };
  });
}
init();

解释：

• function init() {...}：定义一个名为 init 的函数，用于初始化选项卡功能。
• let items = document.querySelectorAll(".tabs div");：使用 document.querySelectorAll(".tabs div") 选取所有 .tabs 容器下的 div 元素，存储在 items 变量中，这些是选项卡元素。
• let content = document.querySelectorAll("#content div");：使用 document.querySelectorAll("#content div") 选取所有 #content 容器下的 div 元素，存储在 content 变量中，这些是内容元素。
• items.forEach((item, index) => {...})：使用 forEach 方法遍历 items 数组。
  • item 是当前遍历到的选项卡元素，index 是元素的索引。
  • item.onclick = () => {...}：为每个选项卡元素添加点击事件处理函数。
  • items.forEach(item => item.classList.remove("active"));：在点击时，移除所有选项卡元素的 active 类。
  • content.forEach(contentItem => contentItem.classList.remove("active"));：移除所有内容元素的 active 类。
  • item.classList.add("active");：为当前点击的选项卡添加 active 类。
  • content[index].classList.add("active");：为与点击选项卡对应的内容元素添加 active 类，使用 index 来匹配。

4. 工作流程 ▶️

1. 页面加载：
   • HTML 结构创建了选项卡和内容部分，部分元素初始带有 active 类，表示初始激活状态。
   • CSS 样式为页面元素设置基本样式，包括布局、背景、边框、内边距等。
   • JavaScript 代码在页面加载时调用 init 函数。
2. 初始化：
   • 在 init 函数中，获取选项卡元素和内容元素。
   • 为每个选项卡元素添加点击事件处理函数。
3. 用户交互：当用户点击某个选项卡元素时：
   • 根据点击选项卡的索引，为对应的内容元素添加 active 类。
   • 为当前点击的选项卡元素添加 active 类。
   • 移除所有选项卡元素和内容元素的 active 类。
   • 点击事件处理函数被触发。

综上所述，HTML 提供了页面的结构，CSS 提供了页面的样式和布局，JavaScript 提供了交互逻辑，三者协同工作，实现了一个卡片化的选项卡切换效果。用户点击不同的选项卡时，相应的内容会显示，其他内容会隐藏，并且选项卡和内容的显示状态会根据 active 类的添加和移除进行切换。

测试结果👍