Tengo un problema con la navegación en html5. Vi muchos tutoriales y no sé qué estoy haciendo mal. Quiero navegar en la misma página.

<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>
0
MayaKP 6 mar. 2018 a las 22:38

3 respuestas

La mejor respuesta

Oh querida ... Estás usando citas equivocadas!

Reemplace <a name=”top”> con <a id="top"> y debería funcionar.

  • 1er error: uso del atributo obsoleto, name en lugar de id.
  • 2do error: usando comillas incorrectas, en lugar de ".
0
naXa 6 mar. 2018 a las 20:26

Esto permitirá la navegación en la misma página para ir a la parte superior, central e inferior.

<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>
0
Jason Aller 6 mar. 2018 a las 20:58

Prefiera id sobre name para las anclas.

<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>
0
naXa 6 mar. 2018 a las 20:20