蓝桥杯 - 简单 - 布局切换

news2025/3/30 23:51:42

介绍

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

本题需要在已提供的基础项目中使用 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 mode
            tool.style.display = "none"; // 隐藏工具
            layoutContainer.classList.add('two-column-layout'); // 添加两列布局类
            layoutContainer.classList.remove('three-column-layout'); // 移除三列布局类

        } else if (this === layoutOptions[1]) {
            // Browse mode
            tool.style.display = "none"; // 隐藏工具
            layoutContainer.classList.add('three-column-layout'); // 添加三列布局类
            layoutContainer.classList.remove('two-column-layout'); // 移除两列布局类

        } else if (this === layoutOptions[2]) {
            // Tool mode
            tool.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');

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2322880.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

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

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

python每日十题(9)

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

macOS 制作dmg磁盘映像安装包

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

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

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

如何下载 Postman?快速指南!

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

Shiro学习(一):Shiro介绍和基本使用

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

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

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

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

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

详解java体系实用知识总结

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

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

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

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

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

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

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

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

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

Flink基础简介和安装部署

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

从零构建大语言模型全栈开发指南:第二部分:模型架构设计与实现-2.2.2文本生成逻辑:Top-k采样与温度控制

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路 文章大纲 2.2.2 文本生成逻辑:Top-k采样与温度控制1. 文本生成的核心挑战与数学框架1.1 自回归生成的基本流程2. `Top-k`采样原理与工程实现2.1 数学定义与算法流程2.2 PyTorch实现优化3. 温度控制的数学本质与参…

LeetCode算法题(Go语言实现)_11

题目 给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符而不改变剩余字符相对位置形成的新字符串。&#xff08;例如&#xff0c;"ace"是"abcde"的一个子序列&a…

Python----数据分析(足球运动员数据分析)

一、数据展示 1.1、数据 1.2、列名 字段名备注Name姓名Nationality国籍National_Position国家队位置National_Kit国家队号码Club所在俱乐部Club_Position所在俱乐部位置Club_Kit俱乐部号码Club_Joining加入俱乐部时间Contract_Expiry合同到期时间Rating评分Height身高Weight体…

matplotlib——南丁格尔玫瑰

南丁格尔玫瑰图&#xff08;Nightingale Rose Chart&#xff09;&#xff0c;是一种特殊形式的柱状图&#xff0c;它以南丁格尔&#xff08;Florence Nightingale&#xff09;命名&#xff0c;她在1858年首次使用这种图表来展示战争期间士兵死亡原因的数据。 它将数据绘制在极坐…

Django与网页表单

我叫补三补四&#xff0c;很高兴见到大家&#xff0c;欢迎一起学习交流和进步 今天来讲一讲网页表单 网页表单又叫做HTML表单&#xff0c;用来处理用户从页面输入发送到服务器的数据&#xff0c;页面表单通常会提供复选框、单选按钮和文本字段&#xff0c;方便用户填写各种形式…

ChatDBA VS DeepSeek:快速诊断 OceanBase 集群新租户数据同步异常

社区王牌专栏《一问一实验&#xff1a;AI 版》改版以来已发布多期&#xff08;51-60&#xff09;&#xff0c;展现了 ChatDBA 在多种场景下解决问题的效果。 下面让我们正式进入《一问一实验&#xff1a;AI 版》第 62 期&#xff0c;看看 ChatDBA 最新效果以及与热门大模型 De…