Garder le selecteur sur la page sélectionner

Microse
Javascript

Bonjour,
J'ai utilisé un code en js qui permet de changer d'item active au clique d'un autre item sur mon menu mais mon problème et que le selecteur se reset à chaque fois à chaque changement de page une idée pour résoudre ceci?

voici le code de mon default.php :

<!DOCTYPE html>
<html lang="fr">
<head> <!-- t�te de page -->

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--concerne IE-->
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!--concerne portable-->

    <link rel="stylesheet" type="text/css" href="Semantic/semantic.css ">
    <link rel="stylesheet" type="text/css" href="Semantic/mon_css.css">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="Semantic/semantic.min.js"></script>

</head>
<body>
    <?php require('Include/Menu.php'); ?>
    <?php require('Include/Javascript.php'); ?>
</body>

voici mon Menu.php


<div class="ui blue inverted segment">
  <div class="ui inverted secondary pointing menu">
  <a class="active item" href="index.php">
    <h3>Accueil</h3>
  </a>
  <a class="item" href="articles.php">
    Articles
  </a>

    <div class="right menu">
    <div class="item">
    <div class="ui icon input">
      <input placeholder="chercher article" type="text">
      <i class="search icon"></i>
    </div>
  </div>
  <div class="item">
        <div class="ui primary button">Se connecter</div>
    </div>
  </div>
</div>
</div>

et Voici mon Js :

      $('.ui.menu')
    .on('click', '.item', function() {
      if(!$(this).hasClass('dropdown')) {
        $(this)
          .addClass('active')
          .siblings('.item')
            .removeClass('active');
      }
    });

2 réponses

Microse
Auteur
Réponse acceptée

merci mais finalement j'ai trouvé avec ceci :
$(function() {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
$(".ui.menu a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
});

antho07

Bonjour,

Avant de résoudre le problème il faut comprendre comment cela fonctionne.

Ton application fonctionne grâce à 2 "machines". Navigateur et serveur (mode client/serveur classique)

Le fonctionnement est le suivant :

  • Le navigateur effectue une requête vers le serveur.
  • Le serveur reçoit la requête et retourne le fichier demandé. Si le fichier est une extension .php alors le fichier est envoyé sur l'interpréteur php pour traitement et génération du code HTML issue de ce traitement PHP. Dans ton exemple c'est le cas.
  • Le contenu HTML généré est envoyé au navigateur.
  • Le navigateur récupère le contenu HTML et l'affiche. Si il y a du javascript, il l'exécute.

Dans ton cas qu'est ce qu'il se passe :

  • Tu as affiché ta page une première fois. Tous les menus sont fermés. Tu cliques dessus. Ton code javascript réagit à cette évènement et fait son travail. Le menu s'ouvre, les autres se ferment.

  • Maintenant tu changes de page. Le navigateur supprime tout son contenu, effectue la requête, reçoit la page , exécute ton javascript.

Pour mettre en place ton système il faut que la navigateur sache quel menu ouvrir lorsqu'il reçoit la page. Il y a plusieurs possibilités.. du propre au dégueulasse mais pèle-mèle il est possible de :

  • Positionner en php la classe CSS qui "ouvre" le menu sur le bon menu.
  • Faire un jeu de ping pong du menu ouvert entre les pages. Tu envois menu1 dans ta requête et ce menu1 se trouve quelque part dans la page dans une variable js de telle sorte que ton script js est capable de la récupérer et d'effectuer un traitmeent adéquate.
  • Utiliser le localStorage du navigateur.

etc...

Je vote 1 mais tout dépend de l'ensemble du système après.