Bonjour,

je cherche à modifier la valeur d'un attribut de type "class" au sein d'un lien.Plus clairement, je souhaite déplacer la class="active" lorsque je clique sur un lien du menu pour que l'on distingue bien sur quelle page l'utilisateur se trouve.

J'ai trouvé plusieurs façons de faire en javascript avec le même résultat, la valeur de la class est bien modifié mais juste pendant une seconde car dès que la page se recharge la modification est annulé car on revient à l'état initial.En clair, je clique sur le lien, la class est modifié le temps du rechargement de la page puis une fois la page rechargée, la modification n'est plus là!

Voici l'html :

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
    <li id="accueil" class="active"><a class="focus" href="/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>Accueil</a></li>
    <li id="presentation" class="inactive"><a class="focus" href="/presentation">Présentation</a></li>
    <li id="pédicurie" class="inactive"><a class="focus" href="/pedicurie">Pédicurie</a></li>
    <li id="podologie" class="inactive"><a class="focus" href="/podologie">Podologie</a></li>
    <li id="posturologie" class="inactive"><a class="focus" href="/posturologie">Posturologie</a></li>
    <li id="contact" class="inactive"><a class="focus" href="/contact">Contact</a></li>
</ul>
</div>

Puis le js :

let accueil = document.getElementById("accueil")

        accueil.addEventListener("click", function(){

            // document.getElementById ('accueil').classList.add('active');//méthode 1

            accueil.setAttribute('class', "active")//méthode 2
            // if(accueil.className === ''){
            //     accueil.className = 'active';
            // }

            // document.getElementById("accueil").className = "active"//méthode 3
        })

J'ai également essayé ceci sans résultat :

function changeClass(){
    document.getElementById("accueil").className = "active"
}

window.onload = function(){
    document.getElementById("accueil").addEventListener( 'click', changeClass);
}

Si une âme charitable pourrait m'apporter ses lumières, se serait bien sympa!!

salut, si j'ai bien compris ton problème c'est que le clique qui recharge la page doit modifier une classe css mais après le rechargement la modification n'est plus effectif?

si c'est bien sa enfaîte c'est tout a fait normale le JS modifie que la page actif, en aucun cas la page suivante. Maintenant si tu appel la fonction de modification de classe directement sur le fichier qui doit recevoir la modification alors la pas de problème  

Bonsoir tormod,

merci pour ta réponse.

Ce que j'aimerais faire (si c'est possible) c'est de mettre une class active lorsque l'on clique sur un lien du menu.

Que veux-tu dire par :"Maintenant si tu appel la fonction de modification de classe directement sur le fichier qui doit recevoir la modification alors la pas de problème "?

si j'ai bien compris ta classe active permet de mettre en évidence le lien de la page consulter?

dans ce cas voila comment faire un exemple par le code sera peut être plus simple.

sur tout tes page tu a un fichier js qui est appeler, sur ce fichier il y a au moins une fonction : 

function class_active(id_page_actuel){
   //on suprime l'unique classe active 
   document.getelementsbyclassname('page_actif')....

   //on ajoute la class_active 
   document.getelementsbyid(id_page_actuel)......
}

ensuite sur tes pages tu appel ta fonction.

se qu'il faut bien comprendre c'est que JS permet de modifier de modifier ton site uniquement si il n'y a aucun rechargement de page, donc une momification après clique qui effectue un rechargement de page ne fonctionnera pas. Par contre une modification après chargement de page la pas de souci. tout modification rester effective tout le temps que le rechargement de page ne pas lieu.

-
Edité par tormod 16 avril 2019 à 11:46:34

Bonjour gueb3.5,

Un autre piste si ton site n'a pas qu'une page :

tu peux faire un test sur l'url de ta page et la comparé a chaque href

Un exemple :

https://codepen.io/Zonecss/pen/WWJoKd

Bonjour Tormod et AliasDmc,

désolé pour la réponse tardive, j'ai été pas mal pris en ce moment.

Tout d'abord, pour Tormod, je n'avais pas précisé (à tort) que je développais sur symfony 4 et oui, la classe active permet de mettre en évidence le lien de la page consulter!

J'ai bien essayé ta méthode en créant un fichier js avec la fonction puis de l'appeler dans le controller qui permet d'accéder à la vue mais j'ai l'impression que je n'ai pas accès à la fonction.J'ai bien essayé de mettre le script ds le template de base puis directement ds ma vue ds un bloc js mais rien n'y fait.

Pour AliasDmc, j'ai plusieurs pages!

La solution temporaire que j'ai trouvé mais vu la duplication de code n'est pas la bonne solution, c'est de créer un template de base pour chaque vue et ds chaque template je modifie les classes des liens.

Merci pour les pistes en tout cas!!

je ne connais pas très bien symphonie 4 mais si tu n'a pas accès a la fonction c'est que tu doit avoir un problème au moment de l'appel du fichier. essaye, dans ton fichier de ne mettre que la ligne suivante : 

alert('coucou, je suis la');

si après rechargement de ta page tu n'a pas une boite de dialogue qui s'ouvre pour te dire "coucou, je suis la" alors le problème viens très certainement de ton lien/lieu d'appel du fichier JS.

si tu a bien la boite de dialogue qui apparaît alors vérifie que tu appel ta fonction correctement (pas de faute de frappe?)et si il n'y en a pas alors une seul idée me viens en tête il y aurais pas une fonction du même nom dans symphonie 4?

Bingo!!!J'ai trouvé une solution!!!

En fait le problème départ était que je voulais modifier les classes en cliquant sur un lien du menu pour visualiser sur quelle page on se trouvait. Or, avec ma première méthode,  cela les modifiaient avant le rechargement de la page ce qui fonctionnait jusqu'a ce que la page se recharge or il fallait faire ces modifs de classes après le rechargement de classes.

J'ai donc créer une class js qui fait appel à une fonction js qui récupère l'url en cours, puis dans un bloc switch, je verifie si l'url correspond à telle ou telle chose, puis je fais les modifs comme cela tout se passe côté client après le rechargement de la page.

Je fais suivre mon code pour que cela puisse aider mon "prochain"!!

Tout d'abord le template de base (base.html.twig): 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}<link rel="stylesheet" href="../../css/style.css">{% endblock %}
    </head>
    <body>
            <nav class="navbar navbar-default">
                <div class="container-fluid  bg-primary">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li id="accueil" class="active"><a class="focus" href="/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>Accueil</a></li>
                            <li id="presentation" class="inactive"><a class="focus" href="/presentation">Présentation</a></li>
                            <li id="pedicurie" class="inactive"><a class="focus" href="/pedicurie">Pédicurie</a></li>
                            <li id="podologie" class="inactive"><a class="focus" href="/podologie">Podologie</a></li>
                            <li id="posturologie" class="inactive"><a class="focus" href="/posturologie">Posturologie</a></li>
                            <li id="contact" class="inactive"><a class="focus" href="/contact">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>

Puis le template d'une des vues (home.html.twig) (les autres sont sur le même principe!!) :

{% extends 'base.html.twig' %}

{% block javascripts %}
    <script src="js/ActiveLink.js"></script>
{% endblock %}

{% block body %}
    <div class="jumbotron">
        <h1 class="text-center" id="test">Welcome to the home page!!</h1>
    </div>
{% endblock %}

 puis le fichier js : 

var Activelink ={
    event: function(){
        var CheminComplet = document.location.href;
        switch (CheminComplet){
            case "http://127.0.0.1:8000/":
                var x = document.getElementsByClassName('active');
                    while(x.length > 0){
                        x[0].className = "inactive";
                    }
            
                //on ajoute la class_active
                document.getElementById("accueil").className = "active";
                break;

            case "http://127.0.0.1:8000/presentation":
                var x = document.getElementsByClassName('active');
                    while(x.length > 0){
                        x[0].className = "inactive";
                    }
            
                //on ajoute la class_active
                document.getElementById("presentation").className = "active";
                break;

            case "http://127.0.0.1:8000/pedicurie":
                var x = document.getElementsByClassName('active');
                    while(x.length > 0){
                        x[0].className = "inactive";
                    }
            
                //on ajoute la class_active
                document.getElementById("pedicurie").className = "active";
                break;

            case "http://127.0.0.1:8000/podologie":
                var x = document.getElementsByClassName('active');
                    while(x.length > 0){
                        x[0].className = "inactive";
                    }
            
                //on ajoute la class_active
                document.getElementById("podologie").className = "active";
                break;

            case "http://127.0.0.1:8000/posturologie":
                var x = document.getElementsByClassName('active');
                    while(x.length > 0){
                        x[0].className = "inactive";
                    }
            
                //on ajoute la class_active
                document.getElementById("posturologie").className = "active";
                break;

            case "http://127.0.0.1:8000/contact":
                var x = document.getElementsByClassName('active');
                    while(x.length > 0){
                        x[0].className = "inactive";
                    }
            
                //on ajoute la class_active
                document.getElementById("contact").className = "active";
        }
    }
}
var myActivelink = Object.create(Activelink)
myActivelink.event()

Et voilou!!

Je ne mets pas encore le sujet en résolu pour avoir des retours si c'est une bonne pratique (ou pas )

modification d'une classe active en javascript sur symfony 4

-
Edité par gueb3.5 25 avril 2019 à 13:40:07

Vu que j'avais de la duplication de code, voici le fichier js après factorisation : 

let Activelink ={
    event: function(){
        let CheminComplet = document.location.href;
        let http = "http://127.0.0.1:8000/";
        switch (CheminComplet){
            case http:
                this.caseEvent("accueil");
            break;

            case http + "presentation":
                this.caseEvent("presentation");
            break;

            case http + "pedicurie":
                this.caseEvent("pedicurie");
            break;

            case http + "podologie":
                this.caseEvent("podologie");
            break;

            case http + "posturologie":
                this.caseEvent("posturologie");
            break;

            case http + "contact":
                this.caseEvent("contact");
            break;
        }
    },
    caseEvent: function(classActive){
        let x = document.getElementsByClassName('active');
            while(x.length > 0){
                x[0].className = "inactive";
            }
            document.getElementById(classActive).className = "active";
    }
}
let myActivelink = Object.create(Activelink)
myActivelink.event()

-
Edité par gueb3.5 26 avril 2019 à 14:36:58

alors une bonne méthode oui et non,

j'ai tendance a dire que si sa marche c'est pas forcement une mauvaise méthode. Par contre est-ce que ta méthode est optimiser et bien non, dans ton cas a chaque nouvelle page que tu créé ton code demande une modification (ici ajouter un "case" dans ton switch) l’idéal serais que tu n'est pas besoin de l'ajouter.

EDIT:

une petite piste?

dans ton menu met aucune class active, et un id du même nom que la page sur chaque lien

quant ta page se charge exécute automatiquement une fonction qui va enlever la class inactive puis ajouter la classe active directement sur le bon lien.

pour connaitre le bon lien tu récupère l'url en cour 

ex : www.ton_site.com/accueil

puis grâce a une regex tu récupère la page dans mon exemple "accueil". Comme dans ton menu tu a l'id accueil tu a plus qu'a faire la modification de class

-
Edité par tormod 27 avril 2019 à 13:07:43

Salut Tormod,

comme d'hab bien occupé donc réponse tardive!!

Effectivement, ta solution marche nickel!Cela gagne environ entre 10 et 30 ms au chargement de la page et optimise les lignes de code.De 40 lignes pour ma solution précédente je passe à 16 lignes!

Bien joué!!!Et un gros merci d'avoir pris le temps de me répondre, cela m'a permis d'apprendre encore un truc!!

Le code pour ceux que ça intéresse :

l'html :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Podologue Argentan{% endblock %}</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
        {% block stylesheets %}<link rel="stylesheet" href="../../css/style.css">{% endblock %}
        <link rel="shortcut icon" type="image/x-icon" href="../../images/logo.png" />
    </head>
        <nav class="navbar navbar-default">
            
            <div class="container-fluid bg-primary menu">
                <div class="logo"></div>
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
            
                <div class="collapse navbar-collapse menuBis" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li id="accueil" class="inactive"><a class="focus" href="{{ path('home') }}"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>Accueil</a></li>
                        <li id="presentation" class="inactive"><a class="focus" href="{{ path('presentation') }}">Présentation</a></li>
                        <li id="pedicurie" class="inactive"><a class="focus" href="{{ path('pedicurie') }}">Pédicurie</a></li>
                        <li id="podologie" class="inactive"><a class="focus" href="{{ path('podologie') }}">Podologie</a></li>
                        <li id="contact" class="inactive"><a class="focus" href="{{ path('contact') }}">Contact</a></li>
                    </ul>
                </div>
                <div class="numberPhone">02-33-36-84-62<span class="input-icon"><i class="fas fa-phone"></i></span></div>
            </div>
        </nav>
    <body id="body">
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>

puis le js :

let Activelink ={
    event: function(){
        //récupère l'url
        let chaine=''+location
        // fractionne aux caractères /
        let tab = chaine.split(/\//)
        let tab1 = tab[3]
        document.getElementById("body").addEventListener("load", this.eventBis(tab1))
    },
    eventBis: function(tab1){
        let x = document.getElementsByClassName('active')
            while(x.length > 0){
                x[0].className = "inactive"
            }
        document.getElementById(tab1).className = "active"
    }
}
let myActivelink = Object.create(Activelink)
myActivelink.event()

Et voilà, encore merci à tormod!!!!