web-dev-qa-db-fra.com

<a href="#..."> lien ne fonctionne pas

J'essaie de créer un ensemble de liens vers des sections spécifiques de la page en utilisant la notation <a href="#...">, mais cela ne semble pas fonctionner. Cliquer sur le lien semble ne rien faire et right-click -> open in a new tab modifie l'URL mais ne passe pas à une autre section de la page. J'utilise Firefox 28.0. Mes liens sont les suivants:

<div>
    <p>Contents</p>
    <ul>
        <li><a href="#map">Map</a></li>
        <li><a href="#timing">Timing</a></li>
        <li><a href="#timingdetails">Timing Details</a></li>
    </ul>
</div>

Et ils devraient être liés à:

<div id="map">[content]</div>
<div id="timing">[content]</div>
<div id="timingdetails">[content]</div>

Les liens vers des pages Web externes fonctionnent bien. Placer la fonction id="..." à l'intérieur d'une balise <a> n'a pas résolu le problème. Mon URL de page Web est de la forme http://127.0.0.1/foo/bar/baz/. C'est dans un projet Python Django.

Une idée pourquoi ça ne marche pas?

htmlfirefoxhref
4
user2592232

Chaque href a besoin d'un attribut anchor , dont l'attribut name ou id doit correspondre à href (sans le signe #). Par exemple.,

<a href="#map">Map</a>

<a name="map">[content]</a>

Un div n'est pas nécessaire s'il n'est pas utilisé à d'autres fins.

3
Roberto Reale

Wow, merci d'avoir signalé cela OP. Apparemment, Mozilla Firefox n’associe pas l’attribut id à un emplacement du document HTML pour des éléments autres que <a>, mais utilise plutôt l’attribut name. Google Chrome fait exactement le contraire. La solution de preuve la plus multi-navigateur serait soit:

1.Donnez à votre ancre divs une name et une id pour vous assurer que max. compatibilité de navigateur, comme: 

<a href="#map">Go to Map</a> <!-- Link -->
----
<div id="map" name="map"></div> <!-- actual anchor -->

Démo: http://jsbin.com/feqeh/3/edit

2.Utilisez uniquement les balises <a> avec l'attribut name comme ancres.

Cela permettra aux liens sur la page de fonctionner dans tous les navigateurs.

1
Tyblitz

ce qui m’est arrivé, c’est que le href does not worksecond time et que parce que je devrais d'abord Remove hash valeur,

regarde comment je l'ai résolu

<a href="#1" onclick="resetHref();">go to Content 1</a>

function resetHref() {
    location.hash = '';
}
1
Basheer AL-MOMANI
<a href="#1">Content 1</a>    
<a href="#2">Content 2</a> 
<a href="#3">Content 3</a>
....
<a name="1"></a>Text here for content 1
<a name="2"></a>Text here for content 2
<a name="3"></a>Text here for content 3

En cliquant sur "Contenu 1", vous passerez directement à "Texte ici pour Contenu 1. Garanti!

0
Natasha

Cela pourrait aider

JS:

function goto($hashtag){
     document.location = "index.html#" + $hashtag;
}

HTML:

<li><a onclick="goto('aboutus')">ABOUT</a></li>
0
rohan parab