FreeCodeCamp认证求助：排查.nav-link元素href属性未通过问题

我在完成FreeCodeCamp认证任务时，遇到一项测试要求「Each .nav-link element should have an href attribute」始终无法通过，尝试调整代码结构未果。以下是我的代码：

CSS代码 #

header {
  position: fixed;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container>div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

HTML代码 #

<header id="header">
  <nav id="nav-bar">

    <input href="#board" type="checkbox" class="nav-link" name="board" value="board">
    <label for="board"> I have a board</label><br>

    <input href="#bike" type="checkbox" class="nav-link" name="bike" value="bike">
    <label for="bike"> I have a bike</label><br>

    <input href="#car" type="checkbox" class="nav-link" name="car" value="car">
    <label for="car"> I have a car</label><br>
  </nav>


  <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Flogos-world.net%2Fwp-content%2Fuploads%2F2020%2F11%2FKTM-Logo-1953-1954.png&f=1&nofb=1&ipt=83385dd56b355083ae1c3c92f1dfefa29ef039d7fed4bc5b0af0f2d1b41cd179&ipo=images" id="header-img"
    alt="Smiley face" width="100%" height="auto">
</header>

<iframe id="video" src="">
        </iframe>
<section id="board">
</section>
<section id="bike">
</section>
<section id="car">
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input id="email" type="email" placeholder="text" name="email"></input>
    <input id="submit" type="submit" placeholder="text"></input>
  </form>
</section>
<iframe id="flex-container" src="">
        </iframe>

问题原因 #

你将.nav-link类添加到了<input type="checkbox">元素上，并为其设置了href属性，但input元素本身不支持href属性，FreeCodeCamp的测试会验证带有.nav-link类的元素是否为标准的可导航元素（如<a>标签）且拥有合法的href属性，因此当前代码无法通过测试。

解决方案 #

将导航链接改为使用<a>标签承载.nav-link类和href属性，同时保留复选框的交互逻辑，调整后的HTML代码如下：

<header id="header">
  <nav id="nav-bar">
    <label>
      <input type="checkbox" name="board" value="board">
      <a href="#board" class="nav-link">I have a board</a>
    </label><br>

    <label>
      <input type="checkbox" name="bike" value="bike">
      <a href="#bike" class="nav-link">I have a bike</a>
    </label><br>

    <label>
      <input type="checkbox" name="car" value="car">
      <a href="#car" class="nav-link">I have a car</a>
    </label><br>
  </nav>

  <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Flogos-world.net%2Fwp-content%2Fuploads%2F2020%2F11%2FKTM-Logo-1953-1954.png&f=1&nofb=1&ipt=83385dd56b355083ae1c3c92f1dfefa29ef039d7fed4bc5b0af0f2d1b41cd179&ipo=images" id="header-img"
    alt="Smiley face" width="100%" height="auto">
</header>

<iframe id="video" src="">
        </iframe>
<section id="board">
</section>
<section id="bike">
</section>
<section id="car">
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input id="email" type="email" placeholder="text" name="email">
    <input id="submit" type="submit" placeholder="text">
  </form>
</section>
<iframe id="flex-container" src="">
        </iframe>

说明 #

• 每个.nav-link现在都是标准的<a>标签，拥有指向对应section的合法href属性，完全符合测试要求。
• 通过将复选框和链接包裹在<label>内，保留了点击文字即可选中复选框的交互效果。

内容的提问来源于stack exchange，提问作者Alexander Stub Michelsen