FreeCodeCamp《构建产品落地页》.nav-link跳转报错排查求助

以下是导致验证不通过的核心问题及修复方案：

• 锚点href存在多余空格，与目标锚点名不匹配
  你header内的.nav-link对应的href写了多余的末尾空格：

  <!-- 错误写法，href值末尾多了空格 -->
  <a class="nav-link" href="#How it works " >How it works</a>
  <a class="nav-link" href="#Pricing ">Pricing</a>
  

  删掉href值里的末尾空格，确保和目标锚点名完全一致即可。

• 使用过时的a[name]锚点定义方式，测试用例不识别
  FreeCodeCamp的测试规则要求落地页对应板块使用id属性作为锚点标记，你目前用的<a name="xxx"></a>是HTML4的废弃用法，测试脚本无法识别。
  正确修改方式：直接给对应板块的容器加对应id，不需要额外的a标签：

  <!-- 错误写法 -->
  <a name = "Features">
  <div id = "info-block">...</div>
  </a>
  
  <!-- 正确写法 -->
  <div id="Features" class = "info-block">...</div>
  

  同理How it works板块给外层div加id="How it works"，Pricing板块给外层div加id="Pricing"即可。

• id属性重复，导致导航识别错误
  页面中id必须全局唯一，你header里已经定义了<nav id="nav-bar">，footer里又重复定义了一个<nav id="nav-bar">，会导致测试脚本定位导航元素出错，把footer里的nav的id改成其他值即可，比如id="footer-nav"。

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