【CSS——效果实现】动态的 Tab 栏（蓝桥杯真题-6180）【合集】

Rossy Yan

发布于 2025-02-18 12:40:46

3600

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

背景介绍

日常在使用移动端 APP 或访问 PC 端网站的时候，常常发现在一些有工具栏或者 Tab 栏的页面会有顶栏固定的效果。简单来说，在页面未开始滚动时顶栏处在其原有的位置上，当页面向下滚动一定区域后，顶栏会跟随滚动固定在页面上方。本题请实现一个顶栏固定的课程网站首页。

准备步骤

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

├── css
│   └── style.css
├── effect.gif
├── images
│   ├── C++_course.png
│   ├── VSCode.png
│   ├── about.png
│   ├── linux_course.png
│   └── python_course.png
├── index.html
└── js
    └── index.js

其中：

css/style.css 是样式文件。
index.html 是主页面。
js/index.js 是页面的 js 文件。
effect.gif 是最终完成的效果图。
images 文件夹下是项目中用到的图片文件。

注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。

cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/17153/scroll.zip
unzip scroll.zip && rm scroll.zip

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

目标效果

请在 style.css 文件中补全代码。当用户向下滚动的高度没有超过标题栏（即 .heading 元素）的高度时，保持 Tab 栏在其原有的位置。当滚动高度超过标题栏的高度时，固定显示 Tab 栏在网页顶部。完成后，效果如下：

要求规定

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

判分标准

本题完全实现题目目标得满分，否则得 0 分。

通关代码✔️

.buttons {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: white;
  gap: 1rem;
  cursor: pointer;
  padding: 0;
  opacity: 0.8;

  /* TODO: 请在此补充代码实现tab栏动态固定 */
  position: sticky;
  top: 0px;
}

/* 请勿修改以下代码 */
.buttons a {
  text-decoration: none;
  padding: 10px;
  border-bottom: 0;
  text-align: center;
  color: #333;
  width: 5rem;
}

.buttons a:active {
  background: whitesmoke;
  border-color: whitesmoke;
  color: #333;
}

/* 页面总体样式 */

body {
  background: #fafafa;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 1em;
  background-color: rgba(50, 50, 50, .3);
}

::-webkit-scrollbar-track {
  border-radius: 1em;
  background-color: rgba(50, 50, 50, .1);
}

/* 标题栏样式 */

.heading {
  background-color: rgb(37, 101, 233);
  color: white;
  width: 100%;
}

h1 {
  height: 3rem;
  width: 100%;
  font-size: 150%;
  margin: 0;
  margin-left: 2rem;
  margin-top: 1rem;
}

/* panels */
.panels {
  width: 100%;
  display: flex;
  justify-content: center;

}

.panels .panel {
  max-width: 900px;
  padding: 2px 10px;
  padding-right: 20px;
  display: none;
  background-color: rgba(37, 101, 233, 0.05);
  border-radius: 15px;
}

#recommend {
  display: block;
}

.active {
  position: relative;
}

.active::after {
  content: "";
  position: absolute;
  background-color: rgb(37, 101, 233);
  display: block;
  height: 0.25rem;
  width: 60%;
  left: 20px;
  bottom: 5px;
  animation: show-bar .3s both;
  border-radius: 5px;
}

.panels .panel h3 {
  padding-left: 1rem;
}

.row {
  border-bottom: 1px solid gainsboro;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 1rem;
}

h4 {
  margin-bottom: 0;
  color: rgba(37, 101, 233);
  font-size: 1.2rem;
}

.row .text {
  border: 1px solid rgba(37, 101, 233, 0.3);
  border-right: none;
  border-radius: 10px;
  padding: 0 1rem;
  padding-bottom: 1rem;
  margin: 1rem 0;
  color: #333;
}

#about div {
  border-radius: 10px;
  padding: 1rem 2rem;
  margin: 1rem 0;
  color: #333;
  width: 90%;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  height: 70vh;
}

#about p {
  font-size: 1.2rem;
  line-height: 1.85rem;
}

#about h2 {
  margin: 0;
}

#about img {
  width: 100%;
}

.row img {
  width: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  margin: 1rem;
}

@keyframes show-bar {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

代码解析📑

一、HTML 部分

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态的 Tab 栏</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="container">
    <!-- 标题栏 -->
    <div class="heading">
      <h1>蓝桥云课</h1>
    </div>
    <!-- Tab栏 -->
    <div class="buttons">
      <a class="active">推荐</a>
      <a>全部</a>
      <a>关于我们</a>
    </div>

    <!-- 内容面板 -->
    <div class="panels">
      <!-- 推荐面板 -->
      <div class="panel" id="recommend">
        <span class="marker"></span>
        <div class="row">
          <div class="text">
            <h4>Linux 基础入门</h4>
            <p class="box">本课程教你如何熟练地使用 Linux... </p>
          </div>
          <img src="images/linux_course.png" alt="Linux课程封面" />
        </div>
        <!-- 其他课程信息 -->
      </div>
      <!-- 全部面板 -->
      <div class="panel" id="all">
        <!-- 课程信息 -->
      </div>
      <!-- 关于我们面板 -->
      <div class="panel" id="about">
        <div>
          <h2>关于我们</h2>
          <p>国信蓝桥教育科技股份有限公司是一个... </p>
          <img src="images/about.png" alt="about">
        </div>
      </div>
    </div>
  </div>
  <script src="js/index.js"></script>
</body>

</html>

<head> 部分：

<meta charset="UTF-8">：设置文档的字符编码为 UTF - 8，确保页面能正确显示各种字符。
<meta http-equiv="X-UA-Compatible" content="IE=edge">：指定页面在 Internet Explorer 中以最新的渲染模式显示。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：使页面在不同设备上具有良好的响应式布局，宽度根据设备屏幕宽度自适应。
<title>动态的 Tab 栏</title>：设置页面的标题，显示在浏览器的标签页上。
<link rel="stylesheet" href="css/style.css">：引入外部 CSS 文件，用于设置页面的样式。

<body> 部分：

<div class="container">：作为整个页面内容的容器，用于包裹其他元素。
<div class="heading">：标题栏，包含一个 <h1> 标签，显示 “蓝桥云课”。
<div class="buttons">：Tab 栏，包含三个 <a> 标签，分别为 “推荐”、“全部” 和 “关于我们”，其中 “推荐” 标签初始带有 active 类。
<div class="panels">：内容面板，包含三个 <div> 元素，分别对应 “推荐”、“全部” 和 “关于我们” 的内容。初始状态下，“推荐” 面板的 display 属性为 block，其他两个面板为 none。
<script src="js/index.js"></script>：引入外部 JavaScript 文件，用于实现页面的交互功能。

二、CSS 部分

.buttons {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: white;
  gap: 1rem;
  cursor: pointer;
  padding: 0;
  opacity: 0.8;
  position: sticky;
  top: 0px;
}

.buttons a {
  text-decoration: none;
  padding: 10px;
  border-bottom: 0;
  text-align: center;
  color: #333;
  width: 5rem;
}

.buttons a:active {
  background: whitesmoke;
  border-color: whitesmoke;
  color: #333;
}

/* 页面总体样式 */
body {
  background: #fafafa;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* 标题栏样式 */
.heading {
  background-color: rgb(37, 101, 233);
  color: white;
  width: 100%;
}

h1 {
  height: 3rem;
  width: 100%;
  font-size: 150%;
  margin: 0;
  margin-left: 2rem;
  margin-top: 1rem;
}

/* panels */
.panels {
  width: 100%;
  display: flex;
  justify-content: center;
}

.panels .panel {
  max-width: 900px;
  padding: 2px 10px;
  padding-right: 20px;
  display: none;
  background-color: rgba(37, 101, 233, 0.05);
  border-radius: 15px;
}

#recommend {
  display: block;
}

.active {
  position: relative;
}

.active::after {
  content: "";
  position: absolute;
  background-color: rgb(37, 101, 233);
  display: block;
  height: 0.25rem;
  width: 60%;
  left: 20px;
  bottom: 5px;
  animation: show-bar .3s both;
  border-radius: 5px;
}

.row {
  border-bottom: 1px solid gainsboro;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 1rem;
}

h4 {
  margin-bottom: 0;
  color: rgba(37, 101, 233);
  font-size: 1.2rem;
}

.row .text {
  border: 1px solid rgba(37, 101, 233, 0.3);
  border-right: none;
  border-radius: 10px;
  padding: 0 1rem;
  padding-bottom: 1rem;
  margin: 1rem 0;
  color: #333;
}

#about div {
  border-radius: 10px;
  padding: 1rem 2rem;
  margin: 1rem 0;
  color: #333;
  width: 90%;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  height: 70vh;
}

#about p {
  font-size: 1.2rem;
  line-height: 1.85rem;
}

#about h2 {
  margin: 0;
}

#about img {
  width: 100%;
}

.row img {
  width: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  margin: 1rem;
}

@keyframes show-bar {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.buttons 类：

display: flex：使用 Flexbox 布局，使子元素水平排列。
justify-content: center：将子元素水平居中对齐。
position: sticky; top: 0px：使 Tab 栏在页面滚动时固定在顶部。

.buttons a 样式：

设置 Tab 栏中链接的样式，去除下划线，设置文字颜色和内边距等。

.panels .panel 样式：

设置内容面板的样式，初始状态下 display: none，表示隐藏。

#recommend 样式：

设置 “推荐” 面板初始显示，display: block。

.active 类和 .active::after 伪元素：

为当前激活的 Tab 栏链接添加下划线动画效果。

@keyframes show-bar：

定义下划线的动画效果，从宽度为 0 逐渐扩展到 100%。

三、Javascript 部分

const links = document.querySelectorAll(".buttons a");
const recommend = document.getElementById("recommend");
const all = document.getElementById("all");
const about = document.getElementById("about");

// 实现tab切换效果
links.forEach((link, index) => {
  link.addEventListener("click", () => {
    if (index === 0) {
      recommend.style.display = "block";
      all.style.display = "none";
      about.style.display = "none";
    } else if (index === 1) {
      all.style.display = "block";
      recommend.style.display = "none";
      about.style.display = "none";
    } else {
      all.style.display = "none";
      recommend.style.display = "none";
      about.style.display = "block";
    }
    link.classList.add("active");
    links.forEach((link, i) => index !== i && link.classList.remove("active"));
  });
});

1. 选择元素：