同一页面上的HTML5导航

Question

我在html5中遇到导航问题。我看过很多教程，但我不知道自己做错了什么。我想在同一页面上导航。

<header>
<nav>
  <a href="#top">TOP</a>
  <a href="#middle">MIDDLE</a>
  <a href="#bottom">BOTTOM</a>
</nav>
 </header>
<main>
<article>
  <section><h1><a name=”top”></a>TOP</h1>
    <figure>
<img src="1.jpg">
</figure>
  <p>...</p>
</section>

Answer 1

这将允许在同一页面上导航到顶部，中间和底部。

<header>
  <nav>
    <a href="#top">TOP</a>
    <a href="#middle">MIDDLE</a>
    <a href="#bottom">BOTTOM</a>
  </nav>
</header>
<main>
  <article>
    <section><a name="top">TOP</a>
      <figure> <img src="https://placem.at/people?h=700"> </figure>
      <p>...</p>
    </section>
    <section><a name="middle">MIDDLE</a>
      <figure><img src="https://placem.at/people?h=500"></figure>
      <p>...</p>
    </section>
    <section> <a name="bottom">BOTTOM</a>
      <figure><img src="https://placem.at/people?h=400"></figure>
      <p>...</p>
    </section>
  </article>
</main>

Answer 2

首选id而不是name。

<header>
<nav>
  <a href="#top">TOP</a>
  <a href="#middle">MIDDLE</a>
  <a href="#bottom">BOTTOM</a>
</nav>
 </header>
<main>
<article>
  <section><h2 id="top">TOP</h2>
    <figure>
<img src="https://placem.at/people?h=700">
</figure>
  <p>...</p>
</section>
  <section><h2 id="middle">MIDDLE</h2>
    <figure>
<img src="https://placem.at/people?h=500">
</figure>
  <p>...</p>
</section>
  <section><h2 id="bottom">BOTTOM</h2>
    <figure>
<img src="https://placem.at/people?h=400">
</figure>
  <p>...</p>
</section>
</article>
</main>

Answer 3

哦亲爱的......你使用的是错误的引语！

将<a name=”top”>替换为<a id="top">，它应该有效。

• 第一个错误：使用过时的属性，name而不是id。
• 第二个错误：使用错误引号，”代替"。