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
?
index.php
, marcalo en el html, no hace falta hacerlo por código JavaScript.