admin管理员组文章数量:1443547
【JavaScript——函数编写】请到下一步（蓝桥杯真题
背景介绍
我们注册一个账号，经常会用到步骤条填写资料，本题需要使用 jQuery 去实现步骤条表单的切换。
准备步骤
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
代码语言：javascript代码运行次数：0运行复制├── css
│ └── style.css
├── js
│ ├── index.js
│ └── jquery-3.6.0.min.js
├── effect.gif
└── index.html其中：
css/style.css是样式文件。js/index.js是实现步骤条表单切换的 js 文件。js/jquery-3.6.0.min.js是 jQuery 文件。effect.gif是最终实现的效果图。index.html是主页面。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
代码语言：javascript代码运行次数：0运行复制cd /home/project
wget .zip && unzip 05.zip && rm 05.zip在浏览器中预览 index.html 页面，当前点击下一页的按钮，不会切换到第二页表单，效果显示如下所示：
目标效果
请补充
js/index.js文件中的代码，实现点击按钮页面上的表单可以切换（表单的切换操作，只能使用display属性来控制）： 在步骤一点击下一页按钮，会切换到步骤二的表单，页面显示如下：
在步骤二点击返回按钮，会切换到步骤一的表单，页面显示如下：
在步骤二点击下一页按钮，会切换到步骤三的表单，页面显示如下：
完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。
具体说明如下：
- 在
index.html文件中，<form>标签里是整个表单的内容，整个表单被分为三个表单域，对应着三个步骤条上的表单。 - 在
index.html文件中，<ul>实现了步骤条的布局，每对<li>代表一个步骤，默认第一个步骤条（个人信息）被激活（class="active"），也就是具有.active的样式属性。 - 在
css/style.css文件中，对表单和步骤条的样式进行了设置，使用:not选择器和display:none实现了分步骤表单的显示/隐藏效果。
要求规定
- 请勿修改
index.html、css/style.css、jquery-3.6.0.min.js文件中的任何内容。 - 表单的切换操作，只能使用
display属性来控制。 - 请严格按照考试要求来做题，切勿修改考试默认提供项目中的文件名称、文件夹路径等，以免造成无法判题通过。
判分标准
- 本题完全实现题目目标得满分，否则得 0 分。
通关代码✔️
代码语言：javascript代码运行次数：0运行复制// 获取所有的 fieldset 元素
let forms = document.querySelectorAll("fieldset")
// 获取步骤条中的所有 li 元素
let lists = document.querySelectorAll("ul li")
// 当前显示的表单页面索引
let page = 0
// 点击下一页的按钮
$(".next").click(function () {
// 隐藏当前表单页面
forms[page].style.display="none"
// 显示下一个表单页面
forms[page + 1].style.display="block"
// 将步骤条中对应的步骤标记为活动状态
lists[page + 1].classList.add("active")
// 更新当前页面索引
page++
});
// 点击返回按钮
$(".previous").click(function () {
// 隐藏当前表单页面
forms[page].style.display="none"
// 显示上一个表单页面
forms[page - 1].style.display="block"
// 将步骤条中对应的步骤取消活动状态
lists[page].classList.remove("active")
// 更新当前页面索引
page--
});
// 点击提交按钮
$(".submit").click(function () {
// 此处可添加表单提交的逻辑
});代码解析
本文标签： JavaScript函数编写请到下一步（蓝桥杯真题
版权声明：本文标题：【JavaScript——函数编写】请到下一步（蓝桥杯真题 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1748144030a2815581.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论