当前位置: 首页 > news >正文

蓝桥杯 web 请到下一步

翻页题(连续考了三年):

24:年度明星项目

23:课程列表

22:本题

由于今年不考jquery了,所以咱们不用Jquery,我把涉及的注释掉了

/*TODO:请补充代码*/
// var current_form, next_form, previous_form; // 表单域
const forms=document.querySelectorAll("fieldset")
const lists=document.querySelectorAll("ul li")
let idx=0//设置初始值
// 点击下一页的按钮
$(".next").click(function () {//只有当点击click触发后才会执行如下代码

  // current_form = $(this).parent();
  forms[idx].style.display="none"//隐藏当前表单
  forms[idx+1].style.display="block"//显示下一表单
  lists[idx+1].classList.add(["active"])//更新步骤条高亮
  idx++;//更新索引
});
// 点击返回按钮
$(".previous").click(function () {
  // current_form = $(this).parent();
  forms[idx].style.display="none"//隐藏当前表单
  forms[idx-1].style.display="block"//显示上一表单
  lists[idx-1].classList.romove("active")//更新步骤条高亮
  idx--;//更新索引
});
// 点击提交按钮
$(".submit").click(function () {
  alert("提交成功");
});

思路:

进度条一:点击下一页,进入到进度条二,显示返回按钮,继续保持显示下一页按钮

进度条二:点击下一页,进入到进度条三,显示提交按钮,隐藏返回按钮,继续保持显示返回按钮

隐藏 (none);       显示(block,这个还要具体去css看,因为也有可能是inline-block)

进度条处理方法:由于例如像进度条一到进度条二是连着的,所以咱们不用把acative去掉,继续保持即可,同时我们要对下一个进度条加一个active

总结一下:下一页按钮:进度条一二显示。返回按钮:进度条二三显示。提交按钮:进度条三显示


 知识补充:(所用到的Dom元素的Api)

  1. 选择元素

    • document.getElementById(id):根据指定的ID获取单个元素。
    • document.getElementsByClassName(className):根据类名获取一组元素,返回一个HTMLCollection。
    • document.getElementsByTagName(tagName):根据标签名获取一组元素,返回一个HTMLCollection。
    • document.querySelector(selector):使用CSS选择器获取匹配的第一个元素。
    • document.querySelectorAll(selector):使用CSS选择器获取所有匹配的元素,返回一个NodeList。
  2. 创建和添加元素

    • document.createElement(tagName):创建一个新的元素节点。
    • element.appendChild(node):将一个节点添加到指定元素的子节点列表的末尾。
    • element.insertBefore(newNode, referenceNode):在已有的子节点之前插入一个新的子节点。
  3. 移除元素

    • element.removeChild(node):从DOM中删除指定的子节点。
    • element.remove():直接移除调用该方法的元素本身。
  4. 修改元素内容

    • element.innerHTML:获取或设置元素内的HTML内容。
    • element.textContent:获取或设置元素内的文本内容,不包括HTML标签。
  5. 属性操作

    • element.getAttribute(name):获取属性的值。
    • element.setAttribute(name, value):设置属性的值。
    • element.removeAttribute(name):移除指定的属性。
  6. 样式操作

    • element.style.property:直接访问或修改元素的内联样式属性。
    • window.getComputedStyle(element):获取应用到元素上的所有计算样式。
  7. 事件处理

    • element.addEventListener(event, function, useCapture):为元素注册事件监听器。
    • element.removeEventListener(event, function, useCapture):移除元素的事件监听器。
    • element.onclick = function(){}:直接为点击事件赋值处理函数。

 

 

 

有同学可能会说index+1会不会出现超过第三页的情况,这题不用担心,因为第三页时就没有下一页这个按钮了,同理返回按钮也是,这题简单就源于它没有边界情况

 

http://www.dtcms.com/a/108643.html

相关文章:

  • Spread使用 配合report使用前篇
  • python爬虫基础讲解
  • 【调用通义千问实现手写文字识别】
  • 04-08手写持久层框架——核心配置和映射配置文件解析
  • 从零构建大语言模型全栈开发指南:第四部分:工程实践与部署-4.2.1视觉-语言模型(VLM)架构设计(CLIP与Flamingo模式)
  • HarmonyOS 基础组件和基础布局的介绍
  • Nyquist插件基础:LISP语法-条件语句
  • 数据量管理系统
  • 光学关键尺寸量测设备市场报告:2024年全球市场销售额达到了14.75亿美元
  • 鸿蒙NEXT开发土司工具类(ArkTs)
  • 前端中rem,vh,vw
  • 网约车APP评价系统从0到1
  • 红宝书第二十六讲:详解Web Workers:专用、共享、Service Worker
  • PyTorch中Linear全连接层
  • 视频设备轨迹回放平台EasyCVR如何搭建公共娱乐场所远程视频监控系统
  • 铁路语义分割数据下载RailSem19: A Dataset for Semantic Rail Scene Understanding
  • 使用Android 原生LocationManager获取经纬度
  • 教育软件 UI 设计:打造吸睛又实用的学习入口
  • SELinux
  • Leetcode-100 二分查找常见操作总结
  • 数据点燃创新引擎:数据驱动的产品开发如何重塑未来?
  • Airflow量化入门系列:第一章 Apache Airflow 基础
  • 红宝书第二十五讲:客户端存储(Cookie、localStorage、IndexedDB):浏览器里的“记忆盒子”
  • Leetcode 6233 -- DFS序列 | 两遍DFS
  • Vue中JSEncrypt 数据加密和解密处理
  • Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
  • wireshak抓手机包 wifi手机抓包工具
  • linux 时钟
  • 【爬虫】网页抓包工具--Fiddler
  • 【Audio开发二】Android原生音量曲线调整说明