页面刷新后如何使用jQuery保持更新后的innerHTML不被重置

开发者阿泽

2026-9-23

问题排查

你原来的代码存在3个核心问题：

存储激活项时，jQuery(".woocommerce-MyAccount-navigation-link").attr("class")取的是页面第一个导航项的类名，不是你当前点击的li的类名，存储的内容本身就错误
页面加载完成后没有读取localStorage的存储值来初始化.js-link的文本，所以刷新后自然会恢复成默认值
点击li的逻辑写反了：你是先判断当前li的类名和存储值一致才更新文本，但实际点击时应该先存当前点击的项，再更新显示内容

实现代码

你原来的HTML结构不需要修改，直接替换JS代码即可：

jQuery(function() {
  var list = jQuery('.js-dropdown-list');
  var link = jQuery('.js-link');
  var icon = '<i class="fa fa-chevron-down"></i>';

  // 页面初始化时读取localStorage，更新导航显示文本
  var activeLiClass = localStorage.getItem("Activeli");
  if (activeLiClass) {
    var activeLi = list.find('li.' + activeLiClass.replace(/ /g, '.'));
    if (activeLi.length) {
      link.html(activeLi.find('a').text() + ' ' + icon);
    }
  }

  // 点击展开收起下拉
  link.click(function(e) {
    list.slideToggle(200);
  });

  // 点击下拉项逻辑
  list.find('li').click(function() {
    var currentLi = jQuery(this);
    // 存当前点击li的类名到localStorage
    localStorage.setItem("Activeli", currentLi.attr("class"));
    // 更新顶部显示文本
    link.html(currentLi.find('a').text() + ' ' + icon);
    // 收起下拉
    list.slideToggle(200);
  });
});