Comment utiliser les hyperliens JavaScript

Comment utiliser les hyperliens JavaScript

Les hyperliens sont des éléments courants dans les pages Web qui connectent différentes pages ou différents sites Web, et JavaScript offre une commodité pour ajouter des effets interactifs dynamiques aux pages Web. Lorsque les deux sont combinés, la page Web peut être rendue plus dynamique et plus pratique. Cet article présentera en détail l'utilisation et la mise en œuvre des hyperliens JavaScript.

1. Connaissances de base

En HTML, un lien hypertexte est défini à l'aide de la balise , comme indiqué ci-dessous :

Texte du lien

Parmi eux, l'attribut href identifie l'URL pointée par l'hyperlien. Si vous devez pointer un lien hypertexte vers un point d'ancrage sur la page actuelle, vous pouvez utiliser le symbole "#" plus le nom de l'ancre comme URL, comme indiqué ci-dessous :

Aller à la première section

De plus, la balise est également OK. Utilisez l'attribut target pour spécifier comment le lien est ouvert. Les valeurs couramment utilisées incluent _blank, _self, _parent et _top, qui signifient respectivement ouverture dans une nouvelle fenêtre, ouverture dans la fenêtre actuelle, ouverture dans la fenêtre parent et ouverture dans toute la fenêtre. Par exemple :

Ouvrez le lien dans une nouvelle fenêtre

2. Comment implémenter des hyperliens JavaScript

1. Empêcher le comportement de saut par défaut

Dans certains cas, il est nécessaire d'interdire au lien hypertexte de sauter et de simplement l'exécuter Du code JavaScript. À ce stade, vous pouvez utiliser la méthode PreventDefault() pour empêcher le comportement de saut par défaut, par exemple :

Pas de saut, exécutez le code JS

Dans le code ci-dessus, l'instruction event.preventDefault() dans l'événement onclick La fonction de gestionnaire peut empêcher le transfert de saut par défaut et vous pouvez ajouter n'importe quel code JavaScript ultérieurement.

2. Modifier l'attribut href du lien

Dans certains cas, il est nécessaire de modifier dynamiquement l'attribut href du lien hypertexte pour générer dynamiquement des liens de saut en fonction des opérations de l'utilisateur ou de l'état des données. Par exemple :

Cliquez pour sauter

<script></p> <pre class="brush:php;toolbar:false">document.querySelector(&quot;#myLink&quot;).addEventListener(&quot;click&quot;, function(){     var targetUrl = &quot;http://www.example.com?id=&quot; + getUserId();     this.href = targetUrl; });</pre> <p></script>

Dans le code ci-dessus, un gestionnaire d'événements de clic est ajouté au lien hypertexte myLink via la méthode addEventListener() lorsque le. l'utilisateur clique sur Lors de la création d'un lien, le code JavaScript obtient l'URL cible en fonction de l'ID utilisateur actuel et définit l'attribut href du lien hypertexte myLink sur l'URL cible.

3. Ouvrir le lien dans une nouvelle fenêtre

Dans certains cas, il est nécessaire d'ouvrir les hyperliens dans une nouvelle fenêtre. A ce stade, vous pouvez utiliser la méthode window.open() pour y parvenir. Transmettez l'URL cible et les caractéristiques prédéfinies de la fenêtre dans la méthode, par exemple :

Ouvrez le lien dans une nouvelle fenêtre

Dans le ci-dessus, le gestionnaire d'événements onclick est appelé. À la méthode window.open(), transmettez l'URL cible et l'attribut _blank pour ouvrir le lien dans une nouvelle fenêtre.

4. Modifier la position de défilement de la page

Dans certains cas, vous devez modifier la position de défilement de la page après avoir cliqué sur un lien hypertexte pour accéder à un point d'ancrage dans la page. À ce stade, vous pouvez spécifier le nom de l'ancre dans l'attribut href du lien hypertexte et ajouter du code JavaScript pour modifier la position de défilement de la page, par exemple :

Sauter à la première section