蓝桥杯 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会不会出现超过第三页的情况，这题不用担心，因为第三页时就没有下一页这个按钮了，同理返回按钮也是，这题简单就源于它没有边界情况