Changer la couleur du <li> actif

Version imprimable

07/04/2016, 15h56
amalliap

Changer la couleur du <li> actif

Bonjour,

Je souhaiterais modifier la couleur du <li> actif dans ma navbar bootstrap quand un utilisateur clique dessus.

Est ce que quelqu'un à des idées ?

Merci d'avance
07/04/2016, 15h58
SpaceFrog

lui attribuer le class active lors du click ?

Oui voila, afin que l'utilisateur identifie sur quelle page il se trouve.

Voici le code de mon html :

Code:

1
2
3
4
5
6
7
8
<nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-header">
                <a asp-controller="Home" asp-action="Index" class="navbar-brand">XXX</a>
            </div>
                <ul class="nav navbar-nav" id="nav">
                    <li><a asp-controller="Home" asp-action="Astreintes">XXX</a></li>
                </ul>
</nav>

Voici mon js :

Code:

1
2
3
4
$('.navbar-nav li').on("click", (function () {
    $('.navbar-nav li').removeClass("active");
    $(this).parent.addClass("active");
}));

Seulement ce code ne fonctionne pas et je ne sais pas pourquoi..

07/04/2016, 16h49
SpaceFrog

Deux erreurs ...

La première

Code:

parent()

la seconde attribue le click sur la a pas sur le li ...
https://jsfiddle.net/wyvn9822/

ou alors vire le parent ...
https://jsfiddle.net/wyvn9822/1/
07/04/2016, 16h56
amalliap

Je ne comprend pas ça ne fonctionne toujours pas..

Est ce que c'est possible que le problème vienne du faite que mon layout qui contient ma navbar est appeler a chaque début de chargement de page..
07/04/2016, 17h12
SpaceFrog

Si ta nav bar est créé dynamiquement oui ...

il faut alors utiliser on par délégation à partir d'un élément parent ..