如何用jQuery实现点击导航跳转新页面后随机切换两个div的显示隐藏

解决方案 #

你的原有代码仅在当前页面的运行时生效，多页面跳转后页面重新加载会清空JS运行状态，所以需要通过本地存储持久化记录切换状态，每次页面加载时先读取状态再渲染对应的div。

修改后的JS代码 #

替换你原有的JS逻辑即可：

$(function() {
  // 页面加载完成后读取存储状态，渲染对应卡片
  const showCard2 = localStorage.getItem('showCard2') === 'true';
  if (showCard2) {
    $('.card1').hide();
    $('.card2').show();
  } else {
    // 无存储记录时默认显示card1
    $('.card1').show();
    $('.card2').hide();
  }

  // 监听导航点击切换存储状态
  $(".navbar .nav-link").click(function() {
    if ($(this).hasClass('disabled')) return;
    const currentStatus = localStorage.getItem('showCard2') === 'true';
    localStorage.setItem('showCard2', !currentStatus);
  });
});

补充说明 #

• 如果你需要关闭浏览器后状态自动重置，把代码里的localStorage替换为sessionStorage即可。
• 原有CSS、HTML代码无需修改，可直接复用。

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