11526 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Peut être pouvez vous m'aider. J'utilise ce bout de code simple afin de la rajouter la class => active au lien sélectionné. Soucis, lorsque la page est rechargée, elle ne garde pas la class. comment éviter cette situation ? Merci

    $(document).on('click','.leftmenu ul li', function(){
        $(this).addClass('active').siblings().removeClass('active')
    })

Modifié par gesualda (22 Dec 2021 - 06:23)
Bonjour. La grande question récurrente, ou encore comment transmettre l'info d'un onglet actif d'une page à une autre...

En l'état actuel - vous avez choisi la méthode javascript -, regardez du côté du Web Storage.
Hello

Je rejoins Olivier, à voir au niveau des SessionStorage pour stocker l'infos sous forme key => value
et comme ça au chargement de la page, il faut checker dans le sessionStorage pour voir s'il y a un element key value et appliquer le fameux addClass .active.
Tout d'abord merci à tous les deux d'avoir porté une réponse à ce sujet. J'ai testé un autre bout de code qui a l'air de fonctionner. Problème, je suis pas un gros connaisseur de JS donc je ne sais pas si c'est sans soucis. j'ai l'impression qu'à chaque rechargement, cela fait sautiller la page (je suis peut etre mito Smiley smile ) Je vous mets le bout pour vos avis.

$(document).ready(function () {
    $(".leftmenu ul li a")
        .filter(function() {
            return location.href == this.href;
        })
        .parent()
        .addClass("active");
});
Administrateur
Bonjour,

il faut s'arranger pour que l'absence ou présence de la classe .active ne modifie pas la hauteur de l'élément. Que ce soit en utilisant outline plutôt que border (si le W3C box model est encore utilisé) ou bien une bordure transparente par défaut et opaque si .active