Exécuter une action JQuery en fonction de l’ancre d’un lien

Niveau intermédiaireJe viens de rencontrer une problématique intéressante : activer une action JQuery en fonction d’une ancre.

Pour être clair, en arrivant sur la page liste.html vous pouvez réaliser une action différente en fonction de l’endroit d’où vous venez grâce à une ancre :
[code type= »codetype »]monlien[/code]

Voyons ensemble la réalisation :
1> Dans une page que nous nommerons donc depart.html, nous afficherons 2 liens pointant vers liste.html. Pour savoir sur quel lien nous avons cliqué, ajoutons une ancre derrière le nom de la page, ici : #lien-un, #lien-deux.

Pour l’exercice, en fonction de l’ancre nous afficherons un texte.
Téléchargez les sources

Solution avec une ancre dans l’URL

[code type= »codetype »] Premier texte ou
Second texte
[/code] Contenu de « depart.html » à insérer entre les balises < body > et < /body >

2> Lorsque nous cliquons sur l’un de ces 2 liens le navigateur ouvre la page liste.html. C’est bien, good boy 🙂
3> Dans cette page, une action sera entreprise par JQuery en fonction du lien sur lequel nous avons cliqué grâce aux ancres #lien-un et #lien-deux.

[code type= »codetype »] [/code] Contenu de « liste.html » à insérer entre les balises < body > et < /body >

Vous noterez que j’ai préparé le terrain en ajoutant tout de suite le style display sur les deux DIV : « block » pour le voir et « none » pour le masquer.
Une fois que les petits bouts de HTML et CSS (display, c’est du CSS) sont en place, « y a plus qu’à » jouer avec le JQuery.

On n’oublie pas d’aller chercher le fichier JQuery afin de le mettre dans le même répertoire que les deux fichiers HTML
[code type= »codetype »]

[/code] Ce code est à insérer dans la page liste.html au mieux entre les balises < head > et < /head >, au pire au dessus du premier div dont l’id est « contenu-un ».

Et voilà !
J’ai repris exactement les codes que je vous ai indiqué et normalement tout se passe bien.

Placez bien les 3 fichiers (depart.html, liste.html et jquery.1.9.1.min.js) dans le même répertoire pour cela fonctionne.

J’ai trouvé une autre solution avec une variable contenu dans l’url du genre : liste.html?mavariable=lien-un

Solution avec une variable dans l’URL

Pour réaliser la même fonctionnalité mais avec des variables, on peut également utiliser des variables que l’on placerait dans l’url comme j’ai pu le voir dans le forum d’Alsacréations

[code type= »codetype »] Premier texte ou
Second texte
[/code]

Vous couperez alors l’url au niveau du signe « = » grâce à location.search.split sachant que t[0] se trouve avant le signe « = » et t[1] est après

[code type= »codetype »]
[/code]