Comment modifier l'attribut href d'un hyperlien en utilisant jQuery

Question

Comment pouvez-vous changer l'attribut href (cible du lien) pour un lien hypertexte en utilisant jQuery?

Answer 1

Utiliser

$("a").attr("href", "http://www.google.com/")

modifiera l'attribut href de tous les liens hypertextes pour pointer vers Google. Vous voudrez probablement un sélecteur un peu plus raffiné cependant. Par exemple, si vous avez un mélange de balises de lien source (hyperlien) et de balises d'ancrage de lien (alias "ancre") :

Le CodeProject

...Alors vous ne voudrez probablement pas ajouter accidentellement des attributs href à ceux-ci. Pour des raisons de sécurité, nous pouvons spécifier que notre sélecteur ne correspondra qu'aux balises avec un attribut href existant:

$("a[href]") //...

Bien sûr, vous aurez probablement quelque chose de plus intéressant en tête. Si vous voulez faire correspondre une ancre avec un href spécifique existant, vous pourriez utiliser quelque chose comme cela :

$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')

Cela trouvera des liens où le href correspond exactement à la chaîne http://www.google.com/. Une tâche plus complexe pourrait consister à faire correspondre, puis à mettre à jour uniquement une partie du href:

$("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

La première partie sélectionne uniquement les liens où l'href commence par http://stackoverflow.com. Ensuite, une fonction est définie qui utilise une expression régulière simple pour remplacer cette partie de l'URL par une nouvelle. Notez la flexibilité que cela vous donne - toute sorte de modification du lien pourrait être faite ici.

Answer 2

Avec jQuery 1.6 et supérieur, vous devriez utiliser :

$("a").prop("href", "http://www.jakcms.com")

La différence entre prop et attr est que attr récupère l'attribut HTML tandis que prop récupère la propriété du DOM.

Vous pouvez trouver plus de détails dans ce post : .prop() vs .attr()

Answer 3

Utilisez la méthode attr sur votre recherche. Vous pouvez remplacer n'importe quel attribut par une nouvelle valeur.

$("a.mylink").attr("href", "http://cupcream.com");

Answer 4

En fonction que vous vouliez changer tous les liens identiques vers autre chose ou que vous vouliez contrôler uniquement ceux dans une section donnée de la page ou chacun individuellement, vous pourriez faire l'une de ces choses.

Changer tous les liens pour pointer vers Google Maps :

$("a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

[

Pour changer les liens dans une section donnée, ajoutez la classe du div conteneur au sélecteur. Cet exemple changera le lien Google dans le contenu, mais pas dans le pied de page:

](http://www.google.com)

`

...lien vers Google     dans le contenu...

    Liens : Google

$(".content a[href='http://www.google.com/']").attr('href', 'http://maps.google.com/');`

Pour changer les liens individuels indépendamment de leur emplacement dans le document, ajoutez un id au lien, puis ajoutez cet id au sélecteur. Cet exemple changera le deuxième lien Google dans le contenu, mais pas le premier ni celui dans le pied de page:

    ...lien vers Google
    dans le contenu...
    ...deuxième lien vers Google
    dans le contenu...

    Liens : Google

$("a#changeme").attr('href', 
'http://maps.google.com/');

Answer 5

Ce snippet est invoqué lorsqu'un lien de la classe 'menu_link' est cliqué et affiche le texte et l'URL du lien. Le retour false empêche le lien d'être suivi.

Option 1
Option 2

$('.menu_link').live('click', function() {
   var thelink = $(this);
   alert ( thelink.html() );
   alert ( thelink.attr('href') );
   alert ( thelink.attr('rel') );

   return false;
});