页面刷新后如何保留菜单按钮的激活状态？

没问题！我来帮你搞定这个菜单按钮刷新后保持激活状态的需求～核心逻辑就是点击按钮时把ID存入Cookie，页面加载时读取Cookie并还原激活状态+加载对应内容。下面是完整的可运行实现方案：

1. HTML结构 #

先搭好菜单按钮和内容展示的基础结构：

<!-- 菜单按钮区域 -->
<nav class="menu">
  <button id="btn1" class="menu-btn active">内容1</button>
  <button id="btn2" class="menu-btn">内容2</button>
  <button id="btn3" class="menu-btn">内容3</button>
</nav>

<!-- 内容展示区域 -->
<div class="content-area">
  <div id="content1" class="content active">这是内容1的专属内容 📝</div>
  <div id="content2" class="content">这是内容2的专属内容 🎨</div>
  <div id="content3" class="content">这是内容3的专属内容 🚀</div>
</div>

2. 基础CSS（激活状态样式） #

给激活状态的按钮和内容加样式，让用户能直观看到当前选中项：

.menu-btn {
  padding: 8px 16px;
  margin: 0 4px;
  border: none;
  background-color: #eee;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}
/* 激活状态的按钮样式 */
.menu-btn.active {
  background-color: #2196F3;
  color: white;
}

.content {
  display: none;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 4px;
}
/* 激活状态的内容样式（显示出来） */
.content.active {
  display: block;
}

3. JavaScript核心逻辑 #

分三个部分：Cookie工具函数、页面初始化、按钮点击事件：

3.1 Cookie读写工具函数 #

封装一下原生Cookie的操作，避免重复写繁琐的代码：

// 设置Cookie，默认7天过期，path=/确保全站可访问
function setCookie(name, value, days = 7) {
  const expirationDate = new Date();
  expirationDate.setTime(expirationDate.getTime() + (days * 24 * 60 * 60 * 1000));
  const expiresStr = `expires=${expirationDate.toUTCString()}`;
  document.cookie = `${name}=${value}; ${expiresStr}; path=/`;
}

// 根据名称获取Cookie值
function getCookie(name) {
  const cookiePrefix = `${name}=`;
  const cookieList = document.cookie.split(';');
  
  for (let cookie of cookieList) {
    // 去掉Cookie开头的空格
    cookie = cookie.trim();
    if (cookie.startsWith(cookiePrefix)) {
      return cookie.slice(cookiePrefix.length);
    }
  }
  return null; // 找不到对应Cookie时返回null
}

3.2 页面初始化函数 #

页面加载完成后，自动读取Cookie并还原激活状态：

// 初始化页面状态
function initPage() {
  // 读取Cookie里的激活按钮ID，没有的话默认用第一个按钮
  const activeBtnId = getCookie('activeMenuBtn') || 'btn1';
  
  // 更新按钮的激活状态
  const targetBtn = document.getElementById(activeBtnId);
  if (targetBtn) {
    // 先移除所有按钮的激活类
    document.querySelectorAll('.menu-btn').forEach(btn => btn.classList.remove('active'));
    // 给目标按钮添加激活类
    targetBtn.classList.add('active');
    
    // 加载对应内容（按钮ID是btnX，内容ID是contentX，所以替换一下）
    showContent(activeBtnId.replace('btn', 'content'));
  }
}

// 切换显示对应内容的函数
function showContent(contentId) {
  // 先隐藏所有内容
  document.querySelectorAll('.content').forEach(content => content.classList.remove('active'));
  // 显示目标内容
  const targetContent = document.getElementById(contentId);
  if (targetContent) {
    targetContent.classList.add('active');
  }
}

3.3 按钮点击事件监听 #

给每个菜单按钮绑定点击事件，点击时保存ID到Cookie并更新UI：

// 给所有菜单按钮绑定点击事件
document.querySelectorAll('.menu-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const currentBtnId = this.id;
    
    // 1. 把当前按钮ID存入Cookie
    setCookie('activeMenuBtn', currentBtnId);
    
    // 2. 更新按钮激活状态
    document.querySelectorAll('.menu-btn').forEach(b => b.classList.remove('active'));
    this.classList.add('active');
    
    // 3. 加载对应内容
    showContent(currentBtnId.replace('btn', 'content'));
  });
});

// 页面DOM加载完成后执行初始化
document.addEventListener('DOMContentLoaded', initPage);

关键点说明 #

• Cookie的path=/设置很重要，确保在网站的所有页面都能读取这个Cookie；
• 初始化时做了默认值处理，如果Cookie不存在（比如第一次访问），会自动激活第一个按钮；
• 所有操作都做了元素存在性判断，避免控制台报错。

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