如何实现点击Next按钮分步递增中文学习教程进度条？

我来帮你搞定这个教程进度条逐次递增的问题！核心思路是持久化保存当前进度值，每次点击Next按钮时按需求递增，再同步更新进度条的视觉显示和无障碍属性。下面分两种方案给你讲解：

方法一：用你提到的jQuery实现 #

1. 初始化进度值（页面加载时执行） #

因为你是多页面教程，用localStorage保存进度能保证切换页面后进度不丢失。在每个教程页面的<script>里加入这段代码：

// 读取本地存储的进度，没有的话默认从0开始
let currentProgress = parseInt(localStorage.getItem('tutorialProgress')) || 0;

// 页面加载完成后，先把进度条同步到当前进度
$(document).ready(function() {
  $('.progress-bar')
    .css('width', currentProgress + '%')
    .text(currentProgress + '%')
    .attr('aria-valuenow', currentProgress);
});

2. 修改Next按钮的点击事件 #

把原来的页面跳转函数改成包含进度更新的逻辑，比如page2()可以改成这样：

function page2() {
  // 每次点击递增5%，同时确保进度不超过100%
  currentProgress += 5;
  currentProgress = Math.min(currentProgress, 100);
  
  // 更新本地存储的进度
  localStorage.setItem('tutorialProgress', currentProgress);
  
  // 同步更新进度条的样式、文字和无障碍属性
  $('.progress-bar')
    .css('width', currentProgress + '%')
    .text(currentProgress + '%')
    .attr('aria-valuenow', currentProgress);
  
  // 保留原来的页面跳转逻辑
  window.location.href = 'page2.html';
}

提示：可以把进度更新的逻辑封装成通用函数updateProgress()，这样每个页面的Next函数（比如page3()、page4()）直接调用这个函数就行，不用重复写代码。

方法二：原生JavaScript实现（无需依赖jQuery） #

如果你不想用jQuery，用原生JS也能实现同样效果：

1. 初始化进度值（页面加载时执行） #

let currentProgress = parseInt(localStorage.getItem('tutorialProgress')) || 0;

// 页面加载完成后同步进度条
window.addEventListener('DOMContentLoaded', function() {
  const progressBar = document.querySelector('.progress-bar');
  if (progressBar) {
    progressBar.style.width = currentProgress + '%';
    progressBar.textContent = currentProgress + '%';
    progressBar.setAttribute('aria-valuenow', currentProgress);
  }
});

2. 修改Next按钮的点击事件 #

function page2() {
  // 递增5%，限制最大值为100%
  currentProgress += 5;
  currentProgress = Math.min(currentProgress, 100);
  
  // 保存进度到本地存储
  localStorage.setItem('tutorialProgress', currentProgress);
  
  // 更新进度条
  const progressBar = document.querySelector('.progress-bar');
  if (progressBar) {
    progressBar.style.width = currentProgress + '%';
    progressBar.textContent = currentProgress + '%';
    progressBar.setAttribute('aria-valuenow', currentProgress);
  }
  
  // 页面跳转
  window.location.href = 'page2.html';
}

额外小提示 #

• 如果你希望教程完成后重置进度，可以在最后一页加个重置按钮，或者写一段代码清空本地存储：localStorage.removeItem('tutorialProgress')
• 代码里加了if (progressBar)判断，避免页面没有进度条元素时出现报错
• 如果你是8个页面想让进度到100%，可以把递增数值改成12.5，这个根据你的教程总数量灵活调整就行

内容的提问来源于stack exchange，提问作者specbk