当前位置： 首页 > article >正文

蓝桥杯 - 简单 - 布局切换

article 2026/2/21 20:20:20

介绍

为了提高用户体验，网站有时需要多种浏览模式。现在特邀请你为蓝桥官网设计具有经典、浏览和工具三种布局模式。使用户可以根据具体情况选择合适的模式，以便更好地浏览网页内容。

本题需要在已提供的基础项目中使用 JS 完善代码实现布局的切换。

准备

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

├── css
├── images
├── index.html
├── effect.gif
└── js└── index.js

其中：

  • css 是样式文件夹。
  • images 是图片文件夹。
  • index.html 是主页面。
  • effect.gif 是最终完成效果图。
  • js/index.js 是待补充代码的 js 文件。

在浏览器中预览 index.html 页面效果如下：

目标

完善 js/index.js 的 TODO 部分的代码，实现被点击的模式元素（class=layout-option）处于激活状态，即添加一个类名（active），其他（class=layout-option）移除激活状态，即移除类名（active）。

最终效果可参考文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

规定

  • 请勿修改 js/index.js 文件外的任何内容。
  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题⽆法通过。
<!DOCTYPE html>
<html>
<head><title>布局切换</title><link rel="stylesheet" href="./css/style.css">
</head>
<body><div class="navbar"><a href="#">首页</a><a href="#">关于我们</a><a href="#">服务</a><a href="#">联系我们</a><div class="search-container"><input type="text" class="search-box" placeholder="输入关键词搜索..."></div><div class="icons"><img id="switching" src="./images/icon.svg" alt=""><img src="./images/setting.svg" alt=""></div></div><div id="tool"><div class="search-container"><input type="text" class="search-box" placeholder="输入关键词搜索..."></div><div class="quick-nav"><ul class="list"><li class="header">快捷导航</li><li class="item">蓝桥云课-web课程</li><li class="item">蓝桥云课-java课程</li><li class="item">蓝桥云课-测试课程</li><li class="item">蓝桥云课官网</li><li class="item">蓝桥云课-个人主页</li><li class="item">蓝桥云课</li></ul></div></div><div class="layout-list" id="mode"><figure><img id="one" class="layout-option  active" src="./images/classic.svg" alt=""><figcaption>经典模式 <img src="./images/select.svg" alt=""></figcaption></figure><figure><img id="two" class="layout-option" src="./images/browse.svg" alt=""><figcaption>浏览模式 <img src="./images/select.svg" alt=""></figcaption></figure><figure><img id="three" class="layout-option" src="./images/tool.svg" alt=""><figcaption>工具模式 <img src="./images/select.svg" alt=""></figcaption></figure></div><div id="layoutContainer" class="two-column-layout"><div class="column"><h2>栏目1</h2><p>这是栏目1的内容。</p></div><div class="column"><h2>栏目2</h2><p>这是栏目2的内容。</p></div><div class="column"><h2>栏目3</h2><p>这是栏目3的内容。</p></div></div><script src="./js/index.js"></script>
</body></html>
// 获取元素
const layoutContainer = document.getElementById('layoutContainer'); // 布局元素
const layoutOptions = document.querySelectorAll('.layout-option'); // 三个模式元素
const switching = document.getElementById('switching'); // 模式按钮// 显示模式
switching.addEventListener('click', function () {mode.style.display = 'flex'; // 设置显示为flex布局
});// 遍历选项
layoutOptions.forEach(function (option) {// 经典模式，浏览模式，工具模式点击事件option.addEventListener('click', function () {// TODO：待补充代码// 移除所有模式元素的 active 类名layoutOptions.forEach(function (item) {item.classList.remove('active');});// 给当前点击的元素添加 active 类名this.classList.add('active');// 箭头函数形式// layoutOptions.forEach((item)=>{//     item.classList.remove('active')// })// this.classList.add('active')// TODO：END //  以下代码无需修改// 根据不同选项进行布局处理if (this === layoutOptions[0]) {// Classic modetool.style.display = "none"; // 隐藏工具layoutContainer.classList.add('two-column-layout'); // 添加两列布局类layoutContainer.classList.remove('three-column-layout'); // 移除三列布局类} else if (this === layoutOptions[1]) {// Browse modetool.style.display = "none"; // 隐藏工具layoutContainer.classList.add('three-column-layout'); // 添加三列布局类layoutContainer.classList.remove('two-column-layout'); // 移除两列布局类} else if (this === layoutOptions[2]) {// Tool modetool.style.display = 'flex'; // 显示工具}mode.style.display = 'none'; // 隐藏布局容器});
});

  • classList 是元素的一个属性，它提供了对元素类名的操作方法。
  • classList.add() ；classList.remove()；
  • 切换类名：classList.toggle()；如果元素已经有该类名，则移除它；如果没有，则添加它。
  • 检查类名是否存在：classList.contains() 方法用于检查元素是否包含指定的类名。
  • 批量操作类名：
  • const element = document.getElementById('myElement');
element.classList.add('class1', 'class2', 'class3');
element.classList.remove('class1', 'class2');

相关文章：

蓝桥杯 - 简单 - 布局切换

介绍 为了提高用户体验&#xff0c;网站有时需要多种浏览模式。现在特邀请你为蓝桥官网设计具有经典、浏览和工具三种布局模式。使用户可以根据具体情况选择合适的模式&#xff0c;以便更好地浏览网页内容。 本题需要在已提供的基础项目中使用 JS 完善代码实现布局的切换。 …...

编程日记 2026/2/13 19:38:38

测试用例生成平台通过大模型升级查询功能，生成智能测试用例

在测试工作中&#xff0c;查询功能是各类系统的核心模块&#xff0c;传统的测试用例编写往往耗时且重复。如何让老旧平台焕发新活力&#xff1f;本文将结合大模型技术&#xff0c;通过用户输入的字段信息&#xff0c;自动化生成高效、精准的测试用例。同时&#xff0c;我们还将…...

编程日记 2026/2/6 7:46:14

python每日十题(9)

外存储器的容量一般都比较大&#xff0c;而且大部分可以移动&#xff0c;便于在不同计算机之间进行信息交流。外存储器中数据被读入内存储器后&#xff0c;才能被CPU读取&#xff0c;CPU不能直接访问外存储器。本题答案为A选项。 进程是指一个具有一定独立功能的程序关于某个数…...

编程日记 2026/2/16 8:08:12

macOS 制作dmg磁盘映像安装包

制作dmg磁盘影像安装包需要准备一下材料&#xff1a; 1. 导出的APP 2. 背景图片 3. 应用程序替身 前两种材料很容易得到。 下面介绍一下 应用程序替身制作过程&#xff1a; Finder —> 选中 应用程序 --> 找到顶部菜单栏中 的 前往 ----> 选择上层文件夹选中应用程…...

编程日记 2026/2/13 0:18:53

LeetCode热题100JS（79/100）第十五天|347|295|121|55|45

347. 前 K 个高频元素 题目链接&#xff1a;347. 前 K 个高频元素 难度&#xff1a;中等 刷题状态&#xff1a;1刷 新知识&#xff1a; 解题过程 思考 示例 1: 输入: nums [1,1,1,2,2,3], k 2 输出: [1,2] 没思路&#xff0c;看答案 题解分析 参考题解链接&#xff1a…...

编程日记 2025/4/5 15:55:24

Rust从入门到精通之精通篇：22.Unsafe Rust 详解

Unsafe Rust 详解 在 Rust 的设计哲学中&#xff0c;安全性是核心原则之一。Rust 的所有权系统、借用检查器和类型系统共同保证了内存安全和线程安全。然而&#xff0c;有些底层操作无法通过 Rust 的安全检查机制进行验证&#xff0c;这就是 unsafe Rust 存在的原因。在本章中…...

编程日记 2025/4/1 3:58:48

Three.js 快速入门教程【十八】射线拾取模型——鼠标点击屏幕选中模型或物体

系列文章目录 Three.js 快速入门教程【一】开启你的 3D Web 开发之旅 Three.js 快速入门教程【二】透视投影相机 Three.js 快速入门教程【三】渲染器 Three.js 快速入门教程【四】三维坐标系 Three.js 快速入门教程【五】动画渲染循环 Three.js 快速入门教程【六】相机控件 Or…...

编程日记 2026/2/13 22:58:44

如何下载 Postman？快速指南！

Postman 是一款非常受欢迎的 API 测试工具。它最初是作为一个 Chrome 插件发布&#xff0c;后来发展成为一款独立的跨平台软件&#xff0c;支持 Windows、Mac、Linux 等操作系统。 Postman 怎么下载教程&#xff08;2025最新版&#xff09;&#xff1f;...

编程日记 2026/2/15 19:56:49

Shiro学习（一）：Shiro介绍和基本使用

一、Shiro介绍 1、百科对shiro的定义如下&#xff1a; Apache Shiro 一个强大且易于使用的 Java 安全框架&#xff0c;它提供了身份验证、授权、加密和会话管理等功能。Shiro 的设计目标是简化企业级应用程序的安全性开发过程&#xff0c;同时保持代码的简洁和易于维护。 2、…...

编程日记 2026/2/13 14:51:18

【git】基本操作

添加文件进本地仓库 git add 文件名删除文件 git rm 文件名版本回退 git reset [--sort| -- mixed | -- hard] sort选项: 只回退版本库&#xff0c;不回退暂存区和工作区 mixed&#xff08;reset的默认选项&#xff09;: 回退版本库和暂存区&#xff0c;不回退工作区 hard :…...

编程日记 2025/4/5 12:36:37

7.1 分治-快排专题：LeetCode 75. 颜色分类

1. 题目链接 LeetCode 75. 颜色分类 2. 题目描述 给定一个包含红色&#xff08;0&#xff09;、白色&#xff08;1&#xff09;和蓝色&#xff08;2&#xff09;的数组 nums&#xff0c;要求原地对数组进行排序&#xff0c;使得相同颜色的元素相邻&#xff0c;且按红、白、蓝…...

编程日记 2026/2/14 12:34:18

深度解析：TOML、XML、YAML及其他配置/数据格式对比

深度解析&#xff1a;TOML、XML、YAML及其他配置/数据格式对比 在软件开发和系统配置中&#xff0c;选择合适的配置或数据格式至关重要。本文将对比 TOML、XML、YAML 等常见格式&#xff0c;梳理它们的核心特性、适用场景及区别&#xff0c;并扩展介绍其他类似格式&#xff0c…...

编程日记 2026/2/15 21:39:12

开源软件许可证冲突的原因和解决方法

1、什么是开源许可证以及许可证冲突产生的问题 开源软件许可证是一种法律文件&#xff0c;它规定了软件用户、分发者和修改者使用、复制、修改和分发开源软件的权利和义务。开源许可证是由软件的版权所有者&#xff08;通常是开发者或开发团队&#xff09;发布的&#xff0c;它…...

编程日记 2026/2/14 15:45:31

详解java体系实用知识总结

0.java技术能力框架 基础模块应用模块综合模块技术岗位与面试流程常用工具集系统架构设计计算机基础常用框架微服务架构jvm原理缓存容器化多线程队列云计算&#xff08;阿里云/aws&#xff09;设计模式数据库数据结构与算法 1.常用设计模式与应用场景 工厂模式&#xff1a;s…...

编程日记 2026/2/13 22:18:15

node-ddk,electron,主进程通讯,窗口间通讯

node-ddk,electron,主进程通讯,窗口间通讯 https://blog.csdn.net/eli960/article/details/146207062 也可以下载demo直接演示 http://linuxmail.cn/go#node-ddk import 在主进程 import main, { NODEDDK } from "node-ddk/main"在渲染进程 import renderer, …...

编程日记 2026/2/15 14:15:28

kubectl 命令参数详解与示例

kubectl 命令参数详解与示例 kubectl 是 Kubernetes 的命令行工具&#xff0c;用于与 Kubernetes 集群交互。下面我将详细介绍 kubectl 的主要命令参数&#xff0c;并提供相应的使用示例。 一、基础命令 1. kubectl get - 获取资源信息 常用参数&#xff1a; -n, --namesp…...

编程日记 2026/2/17 10:47:26

在 Ubuntu 20.04 上重新启动网络

参考链接&#xff1a; 如何在 Ubuntu 22.04 上重新启动网络 执行以下两条命令&#xff0c;ok sudo nmcli networking off sudo nmcli networking on...

编程日记 2026/2/16 7:53:38

STM32 - 在机器人、自动化领域，LL库相比HAL优势明显

在机器人控制器、电机控制器等领域的开发&#xff0c;需要高实时性、精细化控制或者对代码执行效率、占用空间有较高要求。所以&#xff0c;大家常用的HAL库明显不符合要求。再加上&#xff0c;我们学习一门技术&#xff0c;一定要学会掌握底层的原理。MCU开发的底层就是寄存器…...

编程日记 2026/2/17 2:38:14

【区块链安全 | 第二篇】区块链概念详解

文章目录 概述1. 区块链类型2 区块链五层架构3 账本模型4. 节点&#xff08;Node&#xff09;5. 区块&#xff08;Block&#xff09;6. 区块链&#xff08;Blockchain&#xff09;7. 区块链工作流程 核心技术1. 共识机制2. 智能合约 主要组件1. 交易&#xff08;Transaction&am…...

编程日记 2026/2/17 17:05:56

【开源宝藏】30天学会CSS - DAY6 第六课 流光文字动画

第 0 步&#xff1a;项目结构 lighting-text/├─ index.html└─ style.cssindex.html&#xff1a;包含列表 <ul>&#xff0c;其中每个 <li> 放一个字母或符号。style.css&#xff1a;设置背景、文字样式&#xff0c;以及关键帧动画&#xff08;lighting&#xf…...

编程日记 2026/2/13 23:38:07

linux - centos7 部署 redis6.0.5

事先说明 本篇文章只解决在部署redis中出现的问题&#xff0c;并没有部署redis的全过程&#xff0c;详细部署过程可以参考Linux安装部署Redis(超级详细) - 长沙大鹏 - 博客园 执行 make 命令时报错 原因&#xff1a;是因为gcc版本太低 升级gcc版本时 出现没有可用软件包 devt…...

编程日记 2026/2/19 7:47:58

Java反射机制详解：原理、应用与最佳实践

Java反射机制详解&#xff1a;原理、应用与最佳实践 1. 什么是反射&#xff1f; Java反射&#xff08;Reflection&#xff09;是指在运行时动态获取类的信息&#xff08;如类名、方法、字段、构造方法等&#xff09;并操作对象的能力。它允许程序在运行时检查和修改类的行为&…...

编程日记 2026/2/14 16:04:38

Swift实现嵌套json字典重排序并输出string

在网络请求或接口签名中&#xff0c;通常要求将参数按照一定规则拼接成字符串。一个常见的做法是对字典的 key 进行排序&#xff0c;然后按照 “keyvalue” 的格式拼接&#xff0c;多个参数之间以特定符号&#xff08;例如 &&#xff09;连接。 如果参数中包含嵌套的字典或…...

编程日记 2026/2/14 14:12:27

【Ai】--- 可视化 DeepSeek-r1 接入 Open WebUI（超详细）

在编程的艺术世界里，代码和灵感需要寻找到最佳的交融点，才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里，我们将共同追寻这种完美结合，为未来的世界留下属于我们的独特印记。【Ai】--- 可视化 DeepSeek-r1 接入 Open WebUI（超详细） 开发环境一、前情提要：你…...

编程日记 2026/2/14 16:58:35

VSCode加Cline插件加DeepSeek实现AI编程指南

VSCode加Cline插件加DeepSeek实现AI编程指南 简介 本文将详细介绍如何在VSCode中使用Cline插件结合DeepSeek AI实现高效的AI辅助编程&#xff0c;特别适合初学者快速上手。我们将通过实现一个TodoList应用的例子来演示整个流程。 环境准备 1. 安装VSCode 前往VSCode官网下…...

编程日记 2026/2/14 14:46:32

代码规范之Variable Names变量名

代码规范之Variable Names变量名 golang中 官方文档&#xff1a;https://go.dev/wiki/CodeReviewComments#variable-names Variable names in Go should be short rather than long. This is especially true for local variables with limited scope. Prefer c to lineCoun…...

编程日记 2026/2/16 21:39:01

2025春招市场迎AI热潮：生成式人工智能（GAI）认证如何重构人才竞争力

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;已逐渐渗透到我们生活的方方面面&#xff0c;从智能家居到自动驾驶&#xff0c;从智能客服到医疗诊断&#xff0c;AI的身影无处不在。而在这股AI浪潮中&#xff0c;生成式人工智能&#xff08;Generative AI,…...

编程日记 2025/11/24 4:26:48

Flink基础简介和安装部署

文章目录 一、Flink基础简介1、什么是Flink2、Flink流处理特性3、Flink四大基石4、Flink中的角色 二、Flink集群搭建1、Local模式①上传Flink安装包②启动交互窗口③提交任务测试④访问WebUI页面查看⑤退出停止集群 2、Standalone模式①修改配置⽂件 conf/flink-conf.yaml②修改…...

编程日记 2026/2/14 13:21:36

SpringBoot分布式项目实战：观察者模式的高阶应用与避坑指南

一、痛点场景&#xff1a;当观察者遇上分布式 在某电商平台重构项目中&#xff0c;我们遭遇了这样的困境&#xff1a;订单中心完成支付后需要触发库存扣减、积分结算、物流调度等12个后续操作。最初的实现采用了硬编码调用&#xff1a; // 伪代码示例 public void paySuccess…...

编程日记 2026/1/23 2:13:00

How to use pgbench to test performance for PostgreSQL?

pgbench 是一个用于测试 PostgreSQL 数据库性能的基准测试工具。通过模拟多个客户端并发执行 SQL 查询&#xff0c;它可以帮助你评估数据库的性能。以下是使用 pgbench 的基本步骤&#xff1a; 安装 pgbench pgbench 是 PostgreSQL 的一部分&#xff0c;因此在安装 PostgreSQ…...

编程日记 2025/12/24 11:48:11