Marcar botón seleccionado con jQuery y css

Cuando se realiza un menú en Html se puede marcar la sección añadiendo una clase en el elemento <li>. Si deseamos hacerlo automáticamente necesitamos utilizar jQuery. Esto nos permite diferenciar un botón en el menú para que el usuario se ubique rápidamente en la sección que se encuentra.

Para visualizar mejor el código el archivo HTML debe estar publicado en un servidor.

Estructura del HTML

Es importante que el elemento <ul> tenga una clase, en este caso le colocamos “menu”. Al elemento <li> también se le añade la clase “menu-item”.

<ul class=”menu”>
<li class=”menu-item”><a href=”index.html”>Inicio</a></li>
<li class=”menu-item”><a href=”quienes.html”>Quienes Somos</a></li>
<li class=”menu-item”><a href=”servicios.html”>Servicios</a></li>
<li class=”menu-item”><a href=”contacto.html”>Contáctenos</a></li>
</ul>

Para mayor detalle puede visitar el artículo “Crear un menú con listas

Código jQuery

  1. Este código se puede copiar en cualquier parte del HTML. La etiqueta <script> hace referencia al código javascript que se va colocar en el HTML. Recuerda que esta etiqueta se debe cerrar al final del código con </script>
    <script type=”text/javascript” charset=”utf-8″>

    </script>
  2. Lo primero que hacemos es cargar la función.
    $(document).ready(function(){

    });
  3. Añadimos un variable que contendrá el nombre de nuestra URL. Para obtener la URL se colocala propiedad: window.location.pathname. En este caso se obtendrá el nombre “/servicios.html” Si se desea eliminar el “/” se debe añadir .substring(1). En el ejemplo la variable se llama “loc”.
    var loc = window.location.pathname.substring(1);
  4. La siguiente línea busca los elementos del menú. Primero se debe especificar el nombre del elemento <ul> en nuestro ejemplo es “menu” dentro de este elemento el jQuery busca los elementos que contengan la clase “menu-item”. Observar que adelante del nombre se le coloca un “.” por ser una clase.
    $(‘.menu’).find(‘.menu-item’).each(function() {

    });
  5. Se añade otra variable “href” que contendrá el enlace que se coloca al elemento <a>.
    var href = $(this).find(‘a’).attr(‘href’);
  6. Se realiza un condicional para comparar los valores de cada uno de los elementos del menú. En este caso se comparan las dos variables “href” y “loc” la primera contiene el valor del elemento <a> y la segunda el del URL de la página que visitamos. Si ambos son iguales se le añade la clase “current” al elemento <li>.
    if (href == loc) {
    $(this).addClass(‘current’);
    }

 

El código completo sería así:

<script type=”text/javascript” charset=”utf-8″>
$(document).ready(function(){
var loc = window.location.pathname.substring(1);
$(‘.menu’).find(‘.menu-item’).each(function() {
var href = $(this).find(‘a’).attr(‘href’);
if (href == loc) {
$(this).addClass(‘current’);
}
});
});
</script>

 CSS

Finalmente se crea el estilo para la clase “current”

.current{
background-color:#c97c0e;
}