Discussion :

[spawns]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

https://jsfiddle.net/0zdggtoe/

il ne filtre que sur ancien ...

[spawns]

Pardon je me suis trompé dans le code
menu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<li><a href="#">Location </a></li>
<li><a href="#">Location neuf</a></li>
<li>....

et JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

avec un filter ?

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

[spawns]

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

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

Merci SpaceFrog

[spawns]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

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

[spawns]

les liens fonctionne ... mais plus le filtre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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');
})

[SpaceFrog]

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

[spawns]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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');

[SpaceFrog]

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

Ajoute la classe active avec php ?

[spawns]

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..

[SpaceFrog]

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