Bootstrap 3 - classe active

Résolu/Fermé

chabinot Messages postés 322 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2024 - 13 déc. 2017 à 08:08
chabinot Messages postés 322 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2024 - 13 déc. 2017 à 13:52

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

A voir également:

Bootstrap 3 - classe active
Picasa 3 - Télécharger - Albums photo
Photorecit 3 - Télécharger - Visionnage & Diaporama
Ai suite 3 download - Télécharger - Optimisation
3 bip long 2 bip court hp - Forum BIOS
Qu'est ce qu'une femme fait 3 fois par jour et un homme une fois dans sa vie - Forum Loisirs / Divertissements

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
13 déc. 2017 à 12:46

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

chabinot Messages postés 322 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2024 16
13 déc. 2017 à 13:52

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=" 
Notice: Only variables should be passed by reference in D:\serveur\www\boom\includes\functions.php on line 83 
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

Discussions similaires

Que signifie cet emoji :3

Voxbone ? qui est-ce ?

Signification de " :3 "

Enlever le pass. Telecomm. Active

signification "<3" dans un sms