如何在HTML中切换板块时让链接不显示#符号，改为/路径格式

这个需求其实很常见，要把锚点式的www.example.com#section改成路径式的www.example.com/section，你需要结合前端路由逻辑和服务器端配置来实现，下面分步骤给你讲清楚：

一、前端JavaScript处理（核心逻辑） #

首先我们需要修改a标签的href，然后通过JS拦截点击事件，实现无刷新修改URL并滚动到目标板块：

1. 修改HTML结构，把锚点href改成路径形式：

<!-- 把原来的#section改成/section -->
<a href="/section" class="section-jump">Change Section</a>

<!-- 给目标板块加上唯一id，方便定位 -->
<section id="section" class="section">
  <p> Hi </p>
</section>

2. 添加JS逻辑，拦截点击、修改URL并滚动：

// 获取所有跳转链接
const jumpLinks = document.querySelectorAll('.section-jump');

jumpLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止默认的页面跳转行为
    
    // 提取目标板块的id（从/section里拿到section）
    const targetId = link.getAttribute('href').replace('/', '');
    const targetSection = document.getElementById(targetId);
    
    if (targetSection) {
      // 平滑滚动到目标板块
      targetSection.scrollIntoView({ behavior: 'smooth' });
      // 修改URL路径，不会触发页面刷新
      window.history.pushState({ target: targetId }, '', link.getAttribute('href'));
    }
  });
});

3. 处理浏览器前进后退（可选但重要）：
   如果用户点击浏览器的前进/后退按钮，我们需要让页面自动滚动到对应板块，所以要监听popstate事件：

window.addEventListener('popstate', (event) => {
  if (event.state?.target) {
    const targetSection = document.getElementById(event.state.target);
    if (targetSection) {
      targetSection.scrollIntoView({ behavior: 'smooth' });
    }
  }
});

二、服务器端配置（避免刷新404） #

做完前端处理后，点击链接URL会变成/section，但如果用户直接刷新这个页面，服务器会尝试寻找/section这个文件或目录，找不到就会返回404。所以需要配置服务器，把所有这类路径请求重定向到你的主页面（比如index.html），让前端逻辑来处理。

常见服务器配置示例： #

• Nginx：在你的站点配置中添加

location / {
  try_files $uri $uri/ /index.html;
}

• Apache：在项目根目录的.htaccess文件中添加

RewriteEngine On
RewriteBase /
# 排除真实存在的文件和目录
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 所有其他请求转发到index.html
RewriteRule . /index.html [L]

• 框架/静态生成器：如果你用React、Vue这类框架，或者Next.js、Gatsby这类静态生成器，它们自带的路由工具（比如React Router、Vue Router）已经封装好了这些逻辑，只需要配置对应路由指向你的板块组件即可，不需要自己写原生JS。

总结 #

通过以上两步，就能实现点击链接时URL显示为www.example.com/section，同时平滑跳转到对应板块，刷新页面也不会出现404的问题。如果你的项目已经在用前端框架，直接用框架的路由方案会更简洁可靠~

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