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