aide menu boostrap

Question

Bonjour

J'ai un menu très simple et je voudrais pouvoir ajouter la class 'active' pour que lors du clic il passe en couleur. j’ai bien compris qu'il faut faire un script, mais je ne trouve pas la solution.

voici mon mon menu:

<ul>
      <li class="nav-item ">
        <a class="nav-link" href="../examples/charts.html">
          <i class="material-icons">timeline</i>
          <p> Charts </p>
        </a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="../pages/planning.php">
          <i class="material-icons">date_range</i>
          <p> Planning </p>
        </a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="../pages/upload.php">
          <i class="material-icons">downloading</i>
          <p> Upload </p>
        </a>
      </li>
    </ul>

j'ai essayé ce script :

<script>$(document).ready(function () { $('li').click(function() { $('li.nav-item.active').removeClass("active"); $(this).addClass("active"); }); }); </script> mais il ne fonctionne pas.

puis celui ci fonction la couleur change bien mais aucune redirection il bloque par exemple sur le menu upload:

<script>$(document).ready(function () { $('ul.nav > li').click(function (e) { e.preventDefault(); $('ul.nav > li').removeClass('active'); $(this).addClass('active');
});
}) </script>

en vous remerciant pour votre aide

Answer 1

Il semble que le deuxième script que vous avez essayé fonctionne pour changer la classe active lors du clic, mais il empêche également la redirection vers la page correspondante. Pour résoudre ce problème, vous pouvez ajouter une ligne de code pour récupérer l'URL de la page à laquelle le lien renvoie et utiliser cette URL pour rediriger la page après avoir ajouté la classe active. Voici un exemple de code qui peut fonctionner pour votre menu Bootstrap :

<script>
$(document).ready(function() {
  $('ul.nav > li').click(function(e) {
    e.preventDefault();
    $('ul.nav > li').removeClass('active');
    $(this).addClass('active');
    var url = $(this).find('a').attr('href');
    setTimeout(function() {
      window.location = url;
    }, 500);
  });
});
</script>

Ce script ajoute la classe active au clic sur un élément de liste de navigation et récupère l'URL de la page à laquelle le lien renvoie. Ensuite, il utilise la fonction JavaScript setTimeout pour attendre 500 millisecondes avant de rediriger l'utilisateur vers la page correspondante. Vous pouvez ajuster le délai en millisecondes en fonction de vos besoins.