Garder un ajout de class après rechargement

Par SwithFr, il y a 12 ans

Javascript

Bonsoir,

Voilà j'ai créer mon site avec cakePhp et j'aimerais ajouter à mon menu un effet tel que quand on est sur la page active, la couleur de mon lien soit changé.
Donc ajouter une classe "active".

donc j'ai le code tout bête suivant

$(document).ready(function () {
    $(".nav li a").click(function() {
        $('.nav li').removeClass('active');
        $(this).parent().addClass('active');
        return false;
    });
});

le problème c'est que je suis obligé de mettre return false sinon la page indiquée par le lien se charge et du coup on perd l'ajout de la class. C'est parfait pour un site One page mais là ce n'est pas mon cas.

Alors j'ai cherché un petit peut et j'ai trouvé un truc avec des condition sur le window.location mais j'avoue ne rien avoir compris...

Donc est-ce qu'il n'y a pas un moyen plus simple ?

D'avance merci.

5 réponses

antho07, il y a 12 ans

Bonjour,

une solution parmi plein d'autres:

Tu es en mesure d'identifier chaque lien de manière unique grâce à une partie de l'url,

Tu peux ainsi mettre cette élément sur tes liens sous la forme d'un attribut data-idpage="monidentifiant" par exemple,

Quand tu arrives sur une page, tu récupère l'url via window.location.href , tu la parse pour garder juste l'identifiant que l'on nomme ici id.

puis:

$('a[data-idpage='+id+']').addClass('active');

cordialement

Vallyan, il y a 12 ans

Sinon un truc dans ce gout la devrait marcher (peut-être a bidouiller selon ton cas de figure):

$(document).ready(function () {
    $(".nav li a")
        .filter(function() {
            return location.href == this.href;
        })
        .parent()
        .addClass("active");
});

A chaque chargement de page:

  • La ligne 2 passe en revue (et retourne) tous les liens de ton menu
  • Les lignes 3 a 5 filtrent ces liens pour ne retourner que ceux (celui, en l’occurrence) dont le href correspond a l'URL courante
  • La ligne 6 retourne le parent du <a> en question (le <li>, donc)
  • La ligne 7 lui ajoute la classe '.active'

Pas besoin de trigger ton changement de class après un clique, tout se fait automatiquement dès que le DOM est pret. C'est propre, c'est beau, c'est élégant... c'est tout moi ca ;)

Vallyan, il y a 12 ans

Une autre solution serait aussi de garder l'ID de l'élément cliqué en local storage.
Mais c'est moins propre, moins beau, et moins élégant, je trouve ...

Maenhyr, il y a 12 ans

Une autre solution c'est de faire ça en PHP tout simplement, tu es capable de récupérer le Controller et l'action sur laquelle tu te trouves et donc de comparer avec celle entrée dans le menu. Cela te permettra d'ajouter la classe.

SwithFr, il y a 12 ans

Merci Vallyan ton code propre est proprement fonctionnel, Merci!