如何实现无刷新页面切换 点击当前页按钮时无需重载页面

方案1：PHP服务端渲染直接处理（无需额外前端逻辑） #

你已经实现了当前URL的获取，接下来只需要提前定义两个页面对应的目标地址，渲染按钮时做等值判断即可：当前地址和按钮跳转地址一致时，直接渲染为禁用状态的按钮，不需要加跳转链接，自然不会触发页面重载。
代码示例：

<?php
// 获取当前页面完整地址，若仅需比对路径可以直接用 $_SERVER['REQUEST_URI']
$current_url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
// 若URL带可变查询参数，可先裁剪掉查询部分再比对
$current_url = strtok($current_url, '?');

// 定义两个页面对应的目标地址，裁剪规则和当前地址保持一致
$page1_url = "http://你的域名.com/page1";
$page2_url = "http://你的域名.com/page2";
?>

按钮渲染逻辑：

<!-- 页面1切换按钮 -->
<?php if ($current_url === $page1_url): ?>
    <button disabled class="active">页面1</button>
<?php else: ?>
    <a href="<?php echo $page1_url; ?>"><button>页面1</button></a>
<?php endif; ?>

<!-- 页面2切换按钮 -->
<?php if ($current_url === $page2_url): ?>
    <button disabled class="active">页面2</button>
<?php else: ?>
    <a href="<?php echo $page2_url; ?>"><button>页面2</button></a>
<?php endif; ?>

该方案优势：

• 纯服务端实现，无浏览器兼容性问题
• 逻辑简单，无需额外前端资源加载
• 可直接给当前页按钮加激活态样式，用户体验更直观

方案2：前端JS拦截实现（无需修改后端代码） #

如果不想调整服务端渲染逻辑，也可以通过前端事件拦截实现需求：监听切换按钮的点击事件，比对跳转目标和当前页面地址，一致时阻止默认跳转行为即可。
代码示例：

// 给所有切换按钮绑定点击事件
document.querySelectorAll('.page-switch-btn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    // 路径比对，若需要忽略查询参数/hash可自行裁剪后再对比
    if (this.href === window.location.href) {
      e.preventDefault();
      // 可在此处添加点击当前页按钮的自定义反馈，比如提示、动效等
    }
  })
})

对应的按钮HTML结构：

<a href="/page1" class="page-switch-btn"><button>页面1</button></a>
<a href="/page2" class="page-switch-btn"><button>页面2</button></a>

注意事项：如果站点存在跨域名、路由重写、相对路径跳转等场景，建议统一提取路径部分（window.location.pathname 和 a标签的pathname属性）做比对，避免协议、域名、参数差异导致比对失效。

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