Bootstrap 3 - classe active [Résolu/Fermé]

Signaler
Messages postés
262
Date d'inscription
mardi 10 novembre 2015
Statut
Membre
Dernière intervention
6 septembre 2020
 -
Messages postés
262
Date d'inscription
mardi 10 novembre 2015
Statut
Membre
Dernière intervention
6 septembre 2020
 -
Bonjour,
J'ai un menu bootstrap 3 dont voici le source : 
<div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right menu">
        <li class="active"><a href="index.php ">Accueil</a></li>
        <li><a href="login.php ">Connexion</a></li>
        <li><a href="register.php">Inscription</a></li>
      </ul>

J'aimerais, lorsque je clique sur un autre lien, l'activer et désactiver le lien en cours, en jQuery.
J'ai essayé ceci: 
$(function() { 
  $('#navbar ul.nav li').on('click', function() { 
  $(this).parent().find('li.active').removeClass('active'); 
  $(this).addClass('active'); }); 
});

Cela ne marche pas.
Merci de m'aider.
Cordialement

2 réponses

Réponse 1 / 2
Messages postés
32486
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
 3 490
Bonjour,

Ton problème c'est que tu as des liens...
Donc lorsque tu cliques sur un lien... ça redirige vers cette page.... et ça recharge donc le JS qui ne conserve donc pas le $(this) ...

Ton "seul" moyen (si tu n'utilises que du JS) .. c'est de faire une fonction à l'ouverture de ta page
qui vérifie le "nom" de ta page actuelle et qui place la classe active en fonction sur le bon lien.

NB: Au passage .. attention tu as des espaces en trop dans certains de tes HREF


Réponse 2 / 2
Messages postés
262
Date d'inscription
mardi 10 novembre 2015
Statut
Membre
Dernière intervention
6 septembre 2020
 14
Merci pour ta réponse, c'est ce que j'avais fait :
functions.php 
<?php
// Gère l'état acrif de nos différents liens
if (!function_exists('set_active')) {
  function set_active($file, $class = 'active')
  {
    $page = array_pop(explode('/', $_SERVER['SCRIPT_NAME']));
    if ($page == $file.'.php') {
      return $class;
    } else {
      return " ";
    }
  }
}

menu.php 
<div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right menu">
        <li class="<?= set_active('index') ?>"><a href="index.php">Accueil</a></li>
        <li class="<?= set_active('login') ?>"><a href="login.php">Connexion</a></li>
        <li class="<?= set_active('register') ?>"><a href="register.php">Inscription</a></li>
      </ul>
    </div>

De cette façon, cela marche, mais, quand j'inspecte, j'ai des trucs bizarres comme par exemple :
<li class="<br />
<b>Notice</b>: Only variables should be passed by reference in <b>D:\serveur\www\boom\includes\functions.php</b> on line <b>83</b><br />
active"><a href="index.php">Accueil</a></li>
La ligne 83 de functions.php est : 
$page = array_pop(explode('/', $_SERVER['SCRIPT_NAME']));

Si tu as une idée d'où cela peut-il venir. Je continue à chercher de mon côté.
Cordialement
Posez votre question