Discussion :

[amalliap]

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

[SpaceFrog]

lui attribuer le class active lors du click ?

[amalliap]

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

Voici le code de mon html :

Code html :

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

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 :

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

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

[SpaceFrog]

Deux erreurs ...

La première

Code :

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

 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/

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

[SpaceFrog]

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

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