介绍
为了提高用户体验，网站有时需要多种浏览模式。现在特邀请你为蓝桥官网设计具有经典、浏览和工具三种布局模式。使用户可以根据具体情况选择合适的模式，以便更好地浏览网页内容。
本题需要在已提供的基础项目中使用 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');