Menu active a:contains

Salut à tous,
je suis un newbie en Js mais j 'essai des trucs :)
Voila mon soucis
je cherche a rendre actif l'intitulé du menu qui sera cliqué
j'ai un menu (sous bootstrap)

Code:

---

1 2 3 4

<li><a href="#">Location </a></li> <li><a href="#">Location neuf</a></li> <li>....

---

le JS pour passer l'intitulé actif

Code:

---

1 2	$("#LOCATION a:contains('Location ancien')").parent().addClass('active');

---

le problème c'est qu'il me rends actif les 2 'location' et 'location neuf'.
puisqu'ils contiennent tous les 2 Location.
Quelle est la solution.

Merci d'avance de votre aide
Cdt

https://jsfiddle.net/0zdggtoe/

il ne filtre que sur ancien ...

Pardon je me suis trompé dans le code
menu

Code:

---

1 2 3 4

<li><a href="#">Location </a></li> <li><a href="#">Location neuf</a></li> <li>....

---

et JS

Code:

---

1 2	$("#LOCATION a:contains('Location')").parent().addClass('active');

---

Donc cela rends actif les 2 'location' et 'location neuf'.
puisqu'ils contiennent tous les 2 Location.
Quelle est la solution ?

Merci d'avance de votre aide
Cdt

avec un filter ?

https://jsfiddle.net/0zdggtoe/1/

A bah effectivement, quand on sais
c'est plus facile :):)

Ça marche nickel.
je regarde ça de plus prés

Merci SpaceFrog

Par contre j'ai été un peu vite,
le problème c'est que les liens ne fonctionne plus.

Quand on clique dessus on ne change pas de page....

normalement il y a des pages html dans chaque lien

Code:

---

1 2 3

<li><a href="location.html">Location </a></li> <li><a href="location-neuf.html">Location neuf</a></li> <li>....

---

enlève le preventDefault() ...
Mais qui dit lien dit rechargement de page ...

les liens fonctionne ... mais plus le filtre

Code:

---

1 2 3 4 5 6 7 8 9

$(function() { //highlight the current nav $('a').on('click', function(e){ $("#ACCUEIL a").filter( function(){ return $(this).html()==='HOME'; }).parent().addClass('active'); $("#LOCATION a").filter( function(){ return $(this).html()==='LOCATIONS'; }).parent().addClass('active'); $("#NEUF a").filter( function(){ return $(this).html()==='LOCATIONS BIENS NEUFS'; }).parent().addClass('active'); $("#CONTACT a").filter( function(){ return $(this).html()==='CONTACT'; }).parent().addClass('active'); })

---

Si cela fonctionne bien, mais comme sus dit le lien recharge la page ...

Comment faire par ce que mon code précédent
certes ils passé en actif les 2 liens

mais le lien rester actif

avec ce code

Code:

---

1 2 3 4 5

<li><a href="accueil.html">HOME</a></li> <li><a href="location.html">LOCATIONS</a></li> <li><a href="location-neuf.html">LOCATIONS NEUFS</a></li> <li><a href="location.html">CONTACT</a></li>

---

JS

Code:

---

1 2 3 4 5

$('#ACCUEIL a:contains("HOME")').parent().addClass('active'); $('#LOCATION a:contains("LOCATIONS")').parent().addClass('active'); $('#NEUF a:contains("LOCATIONS NEUFS")').parent().addClass('active'); $('#CONTACTa:contains("CONTACT")').parent().addClass('active');

---

Si tu recharge la page, elle se réinitialise, toutes les modifications effectuées par js disparaissent.

Ajoute la classe active avec php ?

ben non l'idée c' était justement de na pas le faire en php :):)
cela doit bien être possible il manque pas grand chose à mon code je pense...

il y a pas une fonction qui permet de filtrer l'expression exacte LOCATIONS pour dire contiens uniquement LOCATIONS par exemple

je passerai en php au cas ou..

Ce n'est possible QUE SI TU RESTE SUR LA MÊME PAGE !