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