如何使用jQuery在页面跳转后修改菜单按钮的文本内容

这里提供一个纯前端的实现方案，兼顾跳转后页面刷新的状态保留需求：

HTML 结构 #

先定义菜单里的两个按钮，给它们唯一ID方便JS操作：

<nav class="purchase-menu">
  <button id="in-person-btn">Buy in person</button>
  <button id="online-btn">Buy Online</button>
</nav>

JavaScript 逻辑 #

核心是监听点击事件修改文本，同时用localStorage保存状态，确保页面跳转刷新后按钮文本不会重置：

// 获取按钮DOM元素
const inPersonBtn = document.getElementById('in-person-btn');
const onlineBtn = document.getElementById('online-btn');

// 页面加载时恢复之前的按钮状态
window.addEventListener('DOMContentLoaded', () => {
  const activeBtn = localStorage.getItem('active-purchase-btn');
  if (activeBtn === 'in-person') {
    inPersonBtn.textContent = 'In Person';
  } else if (activeBtn === 'online') {
    onlineBtn.textContent = 'Online';
  }
});

// 线下购买按钮点击处理
inPersonBtn.addEventListener('click', () => {
  // 修改当前按钮文本
  inPersonBtn.textContent = 'In Person';
  // 重置另一个按钮的原始文本
  onlineBtn.textContent = 'Buy Online';
  // 保存激活状态到本地存储
  localStorage.setItem('active-purchase-btn', 'in-person');
  // 跳转到对应的购买页面，替换成你的实际URL
  window.location.href = '/purchase-in-person';
});

// 线上购买按钮点击处理
onlineBtn.addEventListener('click', () => {
  // 修改当前按钮文本
  onlineBtn.textContent = 'Online';
  // 重置另一个按钮的原始文本
  inPersonBtn.textContent = 'Buy in person';
  // 保存激活状态到本地存储
  localStorage.setItem('active-purchase-btn', 'online');
  // 跳转到对应的购买页面，替换成你的实际URL
  window.location.href = '/purchase-online';
});

关键说明 #

1. 状态保留：因为页面跳转后会重新加载，用localStorage存储激活的按钮标识，能在页面刷新后自动恢复按钮文本状态
2. 互斥重置：点击任意按钮时，会把另一个按钮的文本重置回原始状态，避免两个按钮都显示简化文本
3. 跳转URL：把代码里的跳转路径替换成你实际的购买页面地址即可

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