Discussion :

[a.collery]

Bonjour,
Comment faire pour changer une class selon l'url que je reçois? svp
J'ai un menu et lorsque je suis sur la page sur laquelle j'ai été redirigé, je voudrais attribué la class "active" à mon li sur lequel j'ai cliqué.
Voici mon code.

Code :

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

1
2
3
4
5
6
7
8
 
    <nav class="navbar-default">
	<ul class="list-inline nav navbar-nav">
		<li><a href="index.php" > ACCUEIL</a></li>
		<li><a href="competences.php">NOS COMPETENCES</a></li>
	        <li><a href="contact.php">CONTACTEZ-NOUS</a></li>
	</ul>
    </nav>

Code :

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

1
2
3
4
5
6
7
 
 
$(function() {
 
		$("nav ul li").addClass("active");
 
});

[Kasko]

Salut.
Tu peux placer des identifiants dans tes li et gérer les événements en fonction de ces identifiants ou utiliser les sélecteurs d'attributs sur les balises a.

par exemple :

Code html :

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

1
2
3
4
5
<nav class="navbar-default">
	<ul class="list-inline nav navbar-nav">
		<li id="element1"><a href="index.php" > ACCUEIL</a></li>
	</ul>
</nav>

Et faire ça :

Code :

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

1
2
3
4
   var elementCliquer = $('#element1');
   elementCliquer.click(function() {
      elementCliquer.addClass('active');
   });

ou ça si tu veux pas utilisé des id :

Code :

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

1
2
3
4
var elementCliquer = $('[href*="index"]');
elementCliquer.click(function() {
      elementCliquer.addClass('active');
   });

[a.collery]

Désolé ça ne marche pas, merci

[Kasko]

Montre nous le code complet de la page où tu implémentes le jQuery.

[Invité]

Bonjour,

généralement, on fait ça en PHP, avant affichage...

Sinon, en JavaScript on peut comparer l'URL de la page en cours avec les href des liens.

Voir document.location sur l'évènement onload ( ou jQuery load() ).