Maison  >  Article  >  interface Web  >  Comment modifier dynamiquement l'attribut Href d'une balise d'ancrage avec JavaScript ?

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

Patricia Arquette
Patricia Arquetteoriginal
2024-10-26 20:41:29278parcourir

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>

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>

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>

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>

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!

Déclaration:
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