Home / Questions / 30490
Accepted
Rafael Hernández
Asked: 2020-10-29 16:42:49 +0800 CST 2020-10-29 16:42:49 +0800 CST

How to mark option pressed in bootstrap menu with jquery?

  • 772

In another post I get this code:

( document ).ready(function() {
  $(".nav li").on("click", function(){
    $(".nav").find(".activa").removeClass("activa");
    $(this).addClass("activa");
  });
});

/*CSS*/
.activa{
    background-color:lightblue;
}

but it doesn't work for me, I can't find anything on google to fix this.

So I have the menu with bootstrap.

<nav class="navbar navbar-default" role="navigation">
  <!-- El logotipo y el icono que despliega el menú se agrupan
       para mostrarlos mejor en los dispositivos móviles -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse"
            data-target=".navbar-ex1-collapse">
      <span class="sr-only">Desplegar navegación</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

  </div>

  <!-- Agrupar los enlaces de navegación, los formularios y cualquier
       otro elemento que se pueda ocultar al minimizar la barra -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="linkmenu"><a href="index.php">Biografía</a></li>
      <li class="linkmenu"><a href="discografia.php">Discografía</a></li>
      <li class="linkmenu"><a href="videos.php">Videos</a></li>
      <li class="linkmenu"><a href="descargas.php">Descargas</a></li>
    </ul>  
  </div>
</nav>
jquery

1 Answers

  1. Best Answer

    Try this solution:

    $(document).ready(function() {
var url = window.location.pathname, 
    urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
    $('.nav li a').each(function(){
        if(urlRegExp.test(this.href.replace(/\/$/,''))){
            $('.nav li').removeClass('active');
            $(this).parent('li').addClass('active');
        }
    });
});

    Source: https://stackoverflow.com/a/4866848

    • 1