web-dev-qa-db-fra.com

Accédez à l'ancrage sur une autre page

Je veux simplement naviguer d'une page à un point spécifique sur une autre

J'ai une page d'accueil avec quatre sections.

<section>
   <a name="section1"></a>
</section>

<section id="section2">

</section>

<section>
   <a name="section3"></a>
</section>

<section id="section4">

</section>

Les sections 2 et 4 figurent sur chaque page, donc ma navigation ressemble à:

<nav>
      <ul>
        <li><a href="index.html#section1">ABOUT</a></li>
        <li><a href="#section2">APARTMENTS</a></li>
        <li><a href="index.html#section3">LANDLORDS</a></li>
        <li><a href="#section4">CONTACT</a></li>
      </ul>
</nav>

Les liens ne naviguent pas vers la page d'index ou la section souhaitée de la page d'index.

Merci d'avance.

Maintenant j'ai

<section>
       <a name="section1"></a>
    </section>

    <section id="section2">

    </section>

    <section>
       <a name="section3"></a>
    </section>

    <section id="section4">

    </section>

et ma navigation:

<nav>
      <ul>
        <li><a href="#section1">ABOUT</a></li>
        <li><a href="#section2">APARTMENTS</a></li>
        <li><a href="#section3">LANDLORDS</a></li>
        <li><a href="#section4">CONTACT</a></li>
      </ul>
</nav>

Ça ne marche toujours pas

htmlhyperlinknavigationanchor
8
user1910388

Êtes-vous sûr d'avoir placé les fichiers dans le même répertoire? J'ai testé le code que vous avez fourni et cela fonctionne. Cependant, vous pouvez essayer ceci (une manière différente de donner un identifiant aux sections):

<section>
    <a id="section1">
        CONTENT
    </a>
</section>

Si vous avez fait cela, utilisez simplement la même manière de lier:

<a href="different-page.html#section1">Section One</a>
13
aaronang

Vérifiez votre code javascript pour la ligne qui dit "event.preventDefault ();"

J'ai trouvé cela dans un modèle w3school bootstrap qui incluait cette commande dans le cadre d'un bloc qui fait un joli défilement jusqu'au hashtag. Une fois que je l'ai commenté, les liens ont bien fonctionné.

7
Mike Ursitti

Je pense que vous êtes confronté à ce problème avec Legacy Browser (IE8 et inférieur). Parce que je l'ai testé dans firefox, chorm et IE9. Ça marche bien. Mais a échoué dans le navigateur hérité.

Pour cela, vous devez utiliser une balise d'ancrage au lieu de div id.

Exemple:

<a name="section1"></a>
<section>section content goes here </section>

<a name="section2"></a>
<section>section content goes here </section>

<a name="section3"></a>
<section>section content goes here </section>

<a name="section4"></a>
<section>section content goes here </section>

Vous pouvez maintenant utiliser le nom de classe que vous souhaitez pour vos éléments de section ...

0
Rakesh Kumar

Vous avez besoin d'une balise a-name, veuillez consulter http://www.w3schools.com/tags/att_a_name.asp

0
Teson