本地HTML页面HREF锚标签无法跳转至同目录页面问题求助

我来帮你搞定这个本地页面跳转的问题，咱们一步步来排查可能的原因：

1. 先核对文件路径与命名 #

这是最容易踩坑的点：

• 确认目标文件和当前页面确实在同一个文件夹里，文件名要完全匹配，包括大小写！别小看大小写，虽然Windows本地双击打开不区分，但用本地服务器（比如Live Server）的时候是区分的，比如About.html和about.html会被当成两个文件。
• 文件名里别用空格、中文或者特殊字符（比如&、#），尽量用小写字母加连字符-或者下划线_，比如把异常页面.html改成exception-page.html，避免浏览器解析路径出错。

2. 检查锚标签的写法是否规范 #

确保你的<a>标签是标准写法，别犯低级错误：

• 正确示例：

  <a href="目标文件名.html">点击跳转</a>
  

• 别把href写成src（那是给图片、脚本用的），也别漏掉href属性，不然标签就是个普通文本，根本不会跳转。

3. 换个方式打开页面试试 #

如果你是直接双击HTML文件，用浏览器的file://协议打开，有些浏览器的安全限制可能会阻止本地文件跳转。建议用本地服务器运行页面：

• 比如用VS Code的Live Server插件，启动后页面路径是http://localhost:xxxx/xxx.html，这种环境下的跳转逻辑和线上完全一致，能避免很多本地文件协议的坑。

4. 排查CSS/JS是否干扰了跳转 #

有时候其他代码会影响锚标签的功能：

• 检查CSS里有没有给<a>标签加pointer-events: none，这个属性会让标签失去点击能力；
• 暂时注释掉你引入的Bootstrap CSS（就是代码里那个<link>标签），或者移除页面里的JS代码，测试跳转是否恢复正常，看看是不是第三方代码搞的鬼。

5. 清缓存试试 #

有时候浏览器缓存了旧的路径信息，导致跳转异常。你可以打开浏览器的无痕模式访问页面，或者手动清空缓存后再测试。

给你个测试用的示例代码 #

假设当前页面是index.html，要跳转到同目录的exceptions.html，代码可以这么写：

<!DOCTYPE html>
<html>
<head>
  <title>首页</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 先注释掉CSS，测试跳转是否正常 -->
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
</head>
<body>
  <h1>首页</h1>
  <a href="exceptions.html">跳转到Exceptions页面</a>
</body>
</html>

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