页面刷新后如何保留上次激活的按钮及对应关联内容的显示状态

你只需要在现有JS代码的$(document).ready()函数末尾补充一段初始化逻辑，读取localStorage中存储的激活按钮ID，触发对应按钮的点击事件即可复用现有逻辑，自动同步按钮激活状态、样式和对应内容的显隐。

需添加的初始化代码 #

// 页面加载完成后读取本地存储的激活按钮记录
const savedActiveBtn = localStorage.getItem('Activebtn');
if (savedActiveBtn) {
  // 触发对应按钮的点击事件，直接复用已写好的状态切换逻辑
  $(`#${savedActiveBtn}`).click();
}

如果用户是首次访问页面没有存储记录，会默认沿用你HTML中初始设置的button1激活状态。

完整修改后的JS代码参考 #

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!--button function onclick-->
<script>
  function before(){
    document.getElementById('container-2').style.display = "none";
    document.getElementById('container-1').style.display = "flex";
  }
   
  function after(){
    document.getElementById('container-2').style.display = "flex";
    document.getElementById('container-1').style.display = "none";
  }

  $(document).ready(function() {
    $('#button1').click(function() {
      $('#button2.active').removeClass("active");
      $('#button1').addClass("active");
      $('#button1').css("background-color", "grey");
      $('#button1').css("outline", "none");
      $('#button2').css("background-color", "#fff");
      localStorage.setItem("Activebtn","button1");
    });

    $('#button2').click(function() {
      $('#button1.active').removeClass("active");
      $('#button2').addClass("active");
      $('#button2').css("background-color", "grey");
      $('#button2').css("outline", "none");
      $('#button1').css("background-color", "#fff");
      localStorage.setItem("Activebtn","button2");
    });

    // 新增：页面加载时读取记忆的激活状态
    const savedActiveBtn = localStorage.getItem('Activebtn');
    if (savedActiveBtn) {
      $(`#${savedActiveBtn}`).click();
    }
  });
</script>

可选优化建议 #

你当前CSS代码中的.btn: focus伪类选择器多了空格，修改为.btn:focus即可正常生效。

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