Salut tout le monde !

J'utilise le template le plus basique de Bootstrap (Celui-ci), aucun soucis au niveau de la mise en place mais je rencontre un petit soucis au niveau de la barre de navigation pour "activer" les liens (changer la couleur du background et du texte), voilà un petit exemple de mon soucis:

Ici je suis sur la page d’accueil du site (index.php) qui correspond à la case Home qui elle est activée de base donc ici tout est normal.

Cependant ici:

Je suis sur la page "Actualite.php" qui correspond à ma case "News" et comme vous pouvez le constater la page "News" ne possède pas le changement de couleur au niveau du background et du texte car la << class = "active" >> ne s'inclue pas lors du click et c'est Home qui garde class="active" (voir scripts en dessous)

Ici on a le header (Inclut en PHP) qui inclue la barre de navigation

<nav class="navbar navbar-inverse navbar-fixed-top ">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.php" id="logonavbar">Yeti Studio</a>
          </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="index.php">Home</a></li>
              <li><a href="Actualite.php">News</a></li>
              <li><a href="games.php">Games</a></li>
              <li><a href="Contact.php">Contact</a></li>
            </ul>
          </div>
        </div>
      </nav>

On voit que de base la case Home est en class="active" donc normal pour les screenshots, je cherche donc un système qui me permettrait d'activer et désactiver la class="active" selon la page sur laquelle on se trouve (J'ai une page différente pour chaque page du site), il y a beaucoup de sujets sur internet quand à ce "problème" mais aucun ne m'a permis d'avoir un résultat positif jusqu'à maintenant.

Je ne sais pas trop par où commencer donc si quelqu'un à des pistes de recherche ou même une solution je suis preneur, merci d'avance !

Moi ce que je fais c'est que je vérifie en PHP la route sur laquelle je suis pour afficher la classe ou pas

Salut @Whouki merci de ta réponse Effectivement j'ai vu pas mal de sujet quand au "route" pour faire fonctionner la barre de navigation cependant je ne comprends pas totalement le fonctionnement, pourrait tu développer un petit peu plus ? merci d'avance

Côté serveur, tu utilises un framework particulier ou c'est "from scratch"?

Le site n'est pas encore en ligne donc je suis en serveur local, j'utilise WAMP  et non rien de particulier seulement Bootstrap avec html php et css classique

Ok, donc tu dois passer par du javascript pour gérer le cas alors

Je pense que ceci pourrait t'aider :

https://css-tricks.com/snippets/jquery/add-active-navigation-class-based-on-url/

Attention, il faut que tu aies la bibliothèque JQuery pour que ça fonctionne

Il doit être possible de le faire sans JQuery si tu préfères éviter

Re ! J'ai finalement réussi après quelques jours de recherche et en fait c'était tout simple

J'ai deux solutions différentes, l'une en php (la meilleure selon moi) et une en Javascript. Pour le PHP c'est tout simple, on commence par récupérer l'URL de la page et on la stock dans une variable (avant les lignes du menu !)

<?php
      // On recupere l'URL de la page pour ensuite affecter class = "active" aux liens de nav
      $page = $_SERVER['REQUEST_URI'];
      $page = str_replace("/siteyetistudio/", "",$page);
?>

et ensuite dans le menu on ajoute simplement une condition pour chaque page qui vérifie la page sur laquelle on est, si on est sur la bonne on lui affecte class="active", donc voilà à quoi ressemble le menu après l'ajout des conditions:

<div class="collapse navbar-collapse navbarCollapse">
            <ul class="nav navbar-nav">
              <li <?php if($page == "index.php"){echo 'class="active"';} ?>><a href="index.php">Home</a></li>
              <li <?php if($page == "news.php"){echo 'class="active"';} ?>><a href="news.php">News</a></li>
              <li <?php if($page == "about.php"){echo 'class="active"';} ?>><a href="about.php">About</a></li>
              <li <?php if($page == "Contact.php"){echo 'class="active"';} ?>><a href="Contact.php">Contact</a></li>
            </ul>
          </div>

Vous avez juste à remplacer par les noms de vos pages et voilà c'est tout simple, seul inconvénient (qui n'en est pas vraiment un) les pages doivent être en .php et non pas en .html !

Pour Javascript c'est un peu plus compliqué et ca demande plus de ressources mais je partage quand même la solution on ne sait jamais, tout d'abord nous avons besoin de Jquery sinon impossible de faire fonctionner cette technique donc on ajoute à notre fichier:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

(Il est possible qu'une version de Jquery plus récente soit disponible)

Et ensuite on ajoute tout simplement après notre menu ce petit morceau de Javascript:

<script>
      function setActive() {
        aObj = document.getElementById('nav').getElementsByTagName('a');
        for(i=0;i<aObj.length;i++) {
          if(document.location.href.indexOf(aObj[i].href)>=0) {
            aObj[i].className='active';
          }
        }
      }
      window.onload = setActive;
</script>

Et le tour est joué ! Comme dit la version javascript demande + de ressources et il peut y avoir un petit délai entre l'arrivée sur la page et la page qui se met en class = "active", veillez aussi à enlever le class = "active" qui peut être écrit en dur dans l'un de vos <li> (notamment sur la page d’accueil).

Mais comme dit plus haut je recommande surtout la version PHP

Merci bien.

cette solution vient de m'aider

@AlainLedouxKamdoum1 Bonjour, merci de ne pas déterrer d'ancien sujet résolu. Pour dire merci pas la peine de déterrer un sujet, vous avez la possibilité de cliquer sur les pouces levés des messages qui vous ont aidés. 

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.