1

En un menú bootstrap.

	var url = window.location.pathname, 
   	urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
    $('.nav li a').each(function()
    {
        if(urlRegExp.test(this.href.replace(/\/$/,'')))
        {
        	
            $(this).parent('li').addClass('activa');
        }
    });
/*CSS*/
.activa{
	background-color:red;
    text-decoration: underline; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<body>
  <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="#">Biografía</a></li>
        <li class="linkmenu"><a href="#">Discografía</a></li>
        <li class="linkmenu"><a href="#">Videos</a></li>
        <li class="linkmenu"><a href="#">Descargas</a></li>
      </ul>
    </div>
  </nav>
</body>

con la siguiente función le añado una clase para marcar la opción del menú activa.

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

            $(this).parent('li').addClass('activa');
        }
    });

y funciona bien en producción, pero al cargar la página en mi ambiente local, en la url localhost/mono, aparecen todos los li del menú con la clase agregada.

¿Cómo modificar la expresión regular e indicar que al cargar la página por defecto se marque con la clase activa el index.php?

10
  • No entiendo la pregunta. "al cargar la página aparecen todos con la clase agregada" <--- No, sólo 1 de esos podría tener la clase... Esa expresión regular tiene algunos problemas pero lo que intenta hacer no es marcar la opción activa, sino marcar la url que coincide con la ubicación actual
    – Mariano
    Commented el 31 oct. 2016 a las 3:18
  • @Rafael podrías explicar qué estás intentando hacer? Si sólo te interesa marcar el index.php, marcalo en el html, no hace falta hacerlo por código JavaScript.
    – Mariano
    Commented el 31 oct. 2016 a las 3:19
  • el codigo me funciona. a medias. con él al seleccionar una opcion del menú esta queda marcada. pero si entro en la web cargando el index.php todas las opciones del menú cogen los estilos de la clase .activa Commented el 31 oct. 2016 a las 3:47
  • Quizá esta respuesta pueda ayudarte. es.stackoverflow.com/questions/30490/…
    – Dev. Joel
    Commented el 31 oct. 2016 a las 3:58
  • @Dev.Joel esa respuesta es la que está publicando como pregunta, ya que le trajo problemas
    – Mariano
    Commented el 31 oct. 2016 a las 4:03

3 respuestas 3

1

La expresión regular que estás usando no está bien construida y podría seleccionar elementos no deseados (aunque no es el caso actual). Además, ese código selecciona el path actual, pero no necesariamente a index.php cuando es la página por defecto.

Para solucionarlo, expandimos todas las URLs para que, si terminan en /, o si la última parte de la url no tiene un punto, se le agregue index.php.

Código:

var paginaDefault = 'index.php',
    urlActual = window.location.href.replace(/(\/[^./]+)$|\/$/,'$1/' + paginaDefault);
    
$(".nav li a").each(function(){
    if (this.href.replace(/(\/[^./]+)$|\/$/,'$1/' + paginaDefault) == urlActual) {
        $(this).parent('li').addClass('activa');
    }
});
.activa, .navbar-default .navbar-nav>li.activa>a {
    /* marcamos en rojo */
    color: red;
}
<!-- jQuery y bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<!-- HTML -->
<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 id="currentindex" class="linkmenu"><a href="index.php">Biografía</a></li>
      <li class="linkmenu"><a href="/js">Página Actual</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>

Expresión regular en: https://regex101.com/r/1Zxu1z/2

7
  • no me sirve tu código @Mariano. haber cuando introduzco localhost/mono se produce el error. todos los li del menú quedan marcados por .activa, luego hago click en biografia (index.php) y se marca bien y los demas tambien pero como marco por defecto index.php? al entrar en la web? por que poner una clase o id especifica al li biografia no me sirve.... Commented el 31 oct. 2016 a las 4:14
  • @Rafael Si todos los li tienen la clase, significa que lo estás agregando de otro lado del código. Como verás, en este ejemplo funciona, por lo que el problema está en algún otro lugar. ¿A qué te referís con que quedan todos marcados? Podrías publicar un ejemplo que lo reproduzca?
    – Mariano
    Commented el 31 oct. 2016 a las 4:17
  • www.jamondemono.com Commented el 31 oct. 2016 a las 4:21
  • @Rafael Ya vi cual es el problema: estás usando window.location.pathname, que devuelve un valor vacío en el root... La pregunta es ¿qué te interesa marcar como .activa? ¿Sólo a index.php, a la página actual? ¿A qué?
    – Mariano
    Commented el 31 oct. 2016 a las 4:28
  • me interesa marcar como .activa el index.php al cargar la web. luego pasar la clase .activa entre las opciones del menú Commented el 31 oct. 2016 a las 4:41
0

Puedes darle un id a cada elemento del menú y directamente en el html, en cada vista, agregar una etiqueta <style> dandole estilo al elemento con el id que corresponda.

0

Por que no utilizas el local storage para poder establecer el link que deseas:

localStorage.setItem('currentSection', 'pagina');

Tendrías que cambiar tus href por onclick y poder tener una mejor manipulación de tus urls (claro esto desde mi punto de vista)

También para que pueda funcionar lo siguiente tendrás que agregar una clase única que haga referencia a tu localstorage que guardas.

Deberás tomar en cuenta que cada que le den click a un menu esta variable cambiaría (la del localStorage).

La parte de la magia sucede aquí:

li {
  background: red;
  color: white;
}
.active {
  background: cyan !important;
  color: magenta !important;
}

Y simplemente comparas

if (localStorage.getItem('currentSection') === 'currentLink') {
  document.querySelector('.currentLink').classList.add('active');
}

Esto funciona solamente si se recarga la página, de lo contrarío tendrías mas de un elemento con el mismo estilo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.