Comment pouvez-vous changer le href pour un lien hypertexte en utilisant jQuery?
javascript
jquery
hyperlink
Brian Boatright
la source
la source
Réponses:
En utilisant
modifiera le href de tous les hyperliens pour pointer vers Google. Vous voulez probablement un sélecteur un peu plus raffiné. Par exemple, si vous avez un mélange de balises d'ancrage source de lien (hyperlien) et cible de lien (aka "ancre"):
... Dans ce cas, vous ne voudrez probablement pas leur ajouter accidentellement des
href
attributs. Pour des raisons de sécurité, nous pouvons spécifier que notre sélecteur ne fera correspondre les<a>
balises qu'avec unhref
attribut existant :Bien sûr, vous aurez probablement quelque chose de plus intéressant à l'esprit. Si vous souhaitez faire correspondre une ancre avec une existante spécifique
href
, vous pouvez utiliser quelque chose comme ceci:Cela trouvera des liens où le
href
correspond exactement à la chaînehttp://www.google.com/
. Une tâche plus impliquée peut correspondre, puis mettre à jour uniquement une partie dehref
:La première partie sélectionne liens uniquement lorsque le href commence avec
http://stackoverflow.com
. Ensuite, une fonction est définie qui utilise une simple expression régulière 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 effectuée ici.la source
each
- les éléments suivants seraient désormais possibles:$(selector).attr('href', function() { return this.replace(/.../, '...'); });
href
:...return this.href.replace(/.../, '...'); });
Avec jQuery 1.6 et supérieur, vous devez utiliser:
La différence entre
prop
etattr
est queattr
saisit l'attribut HTML tandis queprop
saisit la propriété DOM.Vous pouvez trouver plus de détails dans cet article: .prop () vs .attr ()
la source
prop
Overattr
serait appréciée, pour les personnes venant à la question et trouvantattr
apparemment fonctionner parfaitement bien dans les nouvelles versions de jQuery ...prop
est plus rapide queattr
parce qu'elle met à jour le dom au lieu de modifier le HTML. jsfiddle.net/je4G5Utilisez la
attr
méthode lors de votre recherche. Vous pouvez changer n'importe quel attribut avec une nouvelle valeur.la source
Selon que vous souhaitez modifier tous les liens identiques en quelque chose d'autre ou que vous souhaitez contrôler uniquement ceux d'une section donnée de la page ou chacun individuellement, vous pouvez effectuer l'une d'entre elles.
Modifiez tous les liens vers Google afin qu'ils pointent vers Google Maps:
Pour modifier les liens dans une section donnée, ajoutez la classe div du conteneur au sélecteur. Cet exemple changera le lien Google dans le contenu, mais pas dans le pied de page:
Pour modifier des liens individuels, quel que soit leur emplacement dans le document, ajoutez un identifiant au lien, puis ajoutez cet identifiant au sélecteur. Cet exemple modifie le deuxième lien Google dans le contenu, mais pas le premier ni celui du pied de page:
la source
Même si l'OP a explicitement demandé une réponse jQuery, vous n'avez pas besoin d'utiliser jQuery pour tout de nos jours.
Quelques méthodes sans jQuery:
Si vous souhaitez modifier la
href
valeur de tous les<a>
éléments, sélectionnez-les tous, puis parcourez la liste de nœuds : (exemple)Si vous souhaitez modifier la
href
valeur de tous les<a>
éléments qui ont réellement unhref
attribut, sélectionnez-les en ajoutant le[href]
sélecteur d'attribut (a[href]
): (exemple)Si vous souhaitez modifier la
href
valeur des<a>
éléments qui contiennent une valeur spécifique, par exemplegoogle.com
, utilisez le sélecteur d'attributa[href*="google.com"]
: (exemple)De même, vous pouvez également utiliser les autres sélecteurs d'attributs . Par exemple:
a[href$=".png"]
pourrait être utilisé pour sélectionner des<a>
éléments dont lahref
valeur se termine par.png
.a[href^="https://"]
pourraient être utilisés pour sélectionner des<a>
éléments avec deshref
valeurs qui sont préfixées avechttps://
.Si vous souhaitez modifier la
href
valeur des<a>
éléments qui remplissent plusieurs conditions: (exemple)..pas besoin de regex, dans la plupart des cas.
la source
Cet extrait de code est invoqué lorsqu'un clic sur un lien de la classe 'menu_link' est affiché, et affiche le texte et l'url du lien. Le retour faux empêche le lien d'être suivi.
la source
La manière la plus simple de le faire est:
Fonction Attr (depuis la version 1.0 de jQuery)
ou
Fonction Prop (depuis jQuery version 1.6)
En outre, l'avantage de la méthode ci-dessus est que si le sélecteur sélectionne une seule ancre, il mettra à jour cette ancre uniquement et si le sélecteur renvoie un groupe d'ancres, il mettra à jour le groupe spécifique via une seule instruction.
Maintenant, il existe de nombreuses façons d'identifier l'ancre exacte ou le groupe d'ancres:
Très simples:
$("a")
$("a:eq(0)")
active
):$("a.active")
profileLink
ID):$("a#proileLink")
$("a:first")
Les plus utiles:
$("[href]")
$("a[href='www.stackoverflow.com']")
$("a[href!='www.stackoverflow.com']")
$("a[href*='www.stackoverflow.com']")
$("a[href^='www.stackoverflow.com']")
$("a[href$='www.stackoverflow.com']")
Maintenant, si vous souhaitez modifier des URL spécifiques, vous pouvez le faire comme suit:
Par exemple, si vous souhaitez ajouter un site Web proxy pour toutes les URL allant sur google.com, vous pouvez l'implémenter comme suit:
la source
Arrêtez d'utiliser jQuery juste pour le plaisir! C'est tellement simple avec JavaScript uniquement.
https://jsfiddle.net/bo77f8mg/1/
la source
la source
Changer le HREF de l'image du logo du thème Wordpress Avada
Si vous installez le plugin PHP ShortCode Exec, vous pouvez créer ce Shortcode que j'ai appelé myjavascript
Vous pouvez maintenant aller dans Apparence / Widgets et choisir l'une des zones de widget de pied de page et utiliser un widget de texte pour ajouter le shortcode suivant
Le sélecteur peut changer en fonction de l'image que vous utilisez et si elle est prête pour la rétine, mais vous pouvez toujours le découvrir à l'aide des outils de développement.
la source
href
dans un attribut, vous pouvez donc le changer en utilisant du JavaScript pur, mais si vous avez déjà injecté jQuery dans votre page, ne vous inquiétez pas, je vais le montrer dans les deux sens:Imaginez que vous avez ceci
href
ci - dessous:Et vous aimez changer le lien ...
En utilisant du JavaScript pur sans bibliothèque, vous pouvez faire:
Mais aussi dans jQuery vous pouvez faire:
ou
Dans ce cas, si vous avez déjà injecté jQuery, probablement jQuery un look plus court et plus cross-browser ... mais à part ça, je vais avec
JS
celui ...la source