Maison > interface Web > js tutoriel > le corps du texte

Comment modifier dynamiquement l'attribut Href d'une balise d'ancrage avec JavaScript ?

Patricia Arquette
Libérer: 2024-10-26 20:41:29
original
277 Les gens l'ont consulté

How to Dynamically Change the Href Attribute of an Anchor Tag with JavaScript?

Modification de la valeur de l'attribut Href d'une balise d'ancrage lors d'un clic sur un bouton via JavaScript

Modification de l'attribut href d'une ancre () la balise sur le clic du bouton à l’aide de JavaScript peut être réalisée par diverses méthodes. Voici quelques approches efficaces :

Utilisation d'un attribut Href vide

Pour conserver la fonctionnalité de la page actuelle sans rechargement, attribuez un attribut href vide à la balise d'ancrage :

<code class="html"><a href="#" onclick="f1()"></a></code>
Copier après la connexion

Empêcher le défilement

L'action par défaut d'un lien href vide est de faire défiler la page vers le haut. Pour éviter cela, ajoutez un « return false ; » déclaration à la fonction onclick ou en ligne :

<code class="html"><a href="#" onclick="f1(); return false;"></a></code>
Copier après la connexion

Renvoi de False à partir de la fonction

Vous pouvez également renvoyer false à partir de la fonction onclick :

<a href="#" onclick="return f1()"></a>

<script>
function f1() {
  // perform actions
  return false;
}
</script>
Copier après la connexion

Approche JavaScript discrète

Pour une approche plus organisée, utilisez du JavaScript discret pour sélectionner la balise d'ancrage et gérer l'événement de clic séparément :

<a href="#" id="abc"></a>
<a href="#" id="myLink"></a>

<script>
document.getElementById("myLink").onclick = function() {
  document.getElementById("abc").href = "xyz.php";
  return false;
};
</script>
Copier après la connexion

Par en mettant en œuvre ces stratégies, vous pouvez modifier efficacement l'attribut href d'une balise d'ancrage lors d'un clic sur un bouton à l'aide de JavaScript, obtenant ainsi la fonctionnalité souhaitée et maintenant la compatibilité entre les navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!