Changer le href d'un lien par #

Bonjour

Bon changer le href d'un lien je sais faire c'est élémentaire.

Seulement là ce que je veux faire c'est rendre inopérant ce lien après le clic, en remplaçant la destination par #. Et là ça ne va plus le # ne remplace pas le lien il s'ajoute à la fin.

Code:

---

<a href="http://monSite/link1.html" onClick="change(this);">link1</a>

---

Code:

---

1 2 3 4

function change(link){ link.href = '#'; }

---

Alors j'ai essayé:

Code:

---

1 2	link.href = 'http:/#';

---

Et là ça me remplace bien le lien mais ça me renvois à la racine du site, cela ne me le rend pas inopérant.
Il faut que je mette quoi svp ?

Bonjour,

Je ne comprend pas le but de mettre un lien avec un chemin et de le rendre non cliquable...
Cela dit ça a l'air de fonctionner chez moi (avec ta fonction change) ou alors je ne comprend pas tout à fait ce que tu veux faire.
Pourrais tu préciser ?

ton exemple avec un jsFiddle : http://jsfiddle.net/R4YdQ/

[EDIT] :
Au passage tu peux aussi utiliser preventDefault si c'est juste annuler le fonctionnement par défaut du clic. Par exemple :

Code:

---

<a href="http://monSite/link1.html" onClick="event.preventDefault();">link1</a>

---

Le lien devient non cliquable mais utilisable avec "ouvrir dans un nouvel onglet" ou encore avec le code.

Merci de ta réponse MisterPur

Le but est simple: j'ai un script php qui me génère une table avec des liens cliquables, et quand on clique sur le lien on affiche en haut de la table le détail d'une fiche.

C'était fait à la bourrin: quand on clique sur un lien, on rechargeait toute la page, table comprise, alors que l'on a besoin que de l'affichage de la fiche en plus.

Donc j'ai voulu faire mieux avec de l'ajax; seulement j'ai un souci avec IE qui malgré tous les return false que je peux mettre persiste à me suivre le lien. Voir ce sujet http://www.developpez.net/forums/d13...-reponse-json/

D'où l'idée de désactiver le lien. Mais ça ne marche pas. IE décide de suivre le lien quand on clique dessus, si je le change après c'est trop tard.

Et puis c'est plus d'actualité. Je viens de passer 2h a ré-écrire mon code php de génération de la table et mon ajax. J'ai mis des liens avec # et j'ai inclus dans chaque ligne de ma table un form que je poste avec l'ajax. C'est plus lourd mais plus de souci avec IE.

Enfin j'ai contourné mais j'aimerais bien avoir une réponse.

J'ai un lien http://monSite/link1.html
Avec ma fonction le lien devient http://monSite/link1.html#
Du moins sur mon wamp!!
Comment faire pour obtenir # tout seul?

Cela peut avoir d'autres intérêts : par exemple un lien cliquable une seule fois.

essaye

Code:

---

1 2 3

function change(link){ link.setAttribute("href","#"); }

---

quand tu dis il s'ajoute à la fin ...
tu parle de ce que tu vois dans la barre d'adresse ou de ce qui est visible dans le DOM au niveau de la console ?

Merci SpaceFrog

J'avais déjà essayé: le résultat est le même.

Et je teste avec :

Code:

---

1 2 3 4 5

function change(link){ link.setAttribute("href","#"); alert(link.href); }

---

Et je retrouve mon url d'origine avec # ajouté à la fin.

Citation:

---

tu parles de ce que tu vois dans la barre d'adresse ou de ce qui est visible dans le DOM au niveau de la console ?

---

tu ne pourras pas modifier le contenu de la barre d'adresse, si c'est ce que tu cherches à faire ...

Bonjour,

Citation:

---

- ce que je veux faire c'est rendre inopérant ce lien après le clic
- D'où l'idée de désactiver le lien

---

alors pourquoi mettre un lien si c'est pour ne pas s'en servir, autant mettre une balise BUTTON, SPAN ou autre encore en gérant l'événement onclick.

Les balises A sont théoriquement faite pour rediriger vers un lien hyper texte.

Et puis au passage le caractère "#" tout seul n'est pas précisément fait pour ne rien indiquer, il indique la page en cours. Cliquer sur un lien constitué uniquement de "#" a pour effet de recharger la page.

Ce # doit venir d'un tuto. En effet, c'est une pratique courante de mettre un # à un lien quand on ne sait pas quoi lui donner à manger. Si on ne lui mettait pas du tout de href, il n'aurait plus l'apparence d'un lien (car plus concerné par le sélecteur CSS a:link).

Bien sûr la question qui a été soulevée est : à ce moment-là, est-ce que c'est d'un lien dont on a vraiment besoin ? C'est une autre histoire.

Pour éviter que le # se rajoute à la fin de l'URL quand on clique sur le lien, il faut annuler le clic. Le coup du return false fonctionne bien chez moi, sous Firefox 24 et sous le plus vieux IE que j'ai sous la main, IE8.

Code:

---

<a href="#" onclick="...; return false">clique-moi</a>

---

Plus propre, utilise un gestionnaire d'évènement (un event listener).

Code:

---

<a href="#" id="monlien">machin</a>

---

Le JavaScript associé :

Code:

---

1 2 3 4 5

document.getElementById("monlien").addEventListener("click", function( event ){ event.preventDefault(); // empêche le # // à la suite, le code pour afficher le détail de la fiche ... }, false);

---

Si tu mets ce code dans le <head>, tu dois t'assurer qu'il ne s'exécute pas trop tôt, sinon le lien n'existera pas encore et ton script ne le trouvera pas. Pour ça, ajoute un gestionnaire d'évènement sur l'évènement "load" de window ou bien sur l'évènement "DOMContentLoaded" de document.

Citation:

---

un lien constitué uniquement de "#" a pour effet de recharger la page

---

Euh non... pas tout à fait.
Un lien constitué d'une ancre va créer un lien interne à la page vers l'élément référencé par l'ancre. Si l'ancre est vide (caractère # seul) alors le lien renverra en haut de la page, mais celle-ci n'est pas rechargée (pas de passage vers le serveur) elle est juste remontée.

Ah oui tu fais bien de préciser, j'avais oublié le contexte effectivement. J'ai trop l'habitude mettre le '#' dans l'attribut action d'un formulaire et dans ce cas cela recharge la même page, mais pas pour un lien standard.