Ejemplo (da clic en una opción).
Para hacer que un menú nos indique cual es la opción activa, o la sección en que nos encontramos en una página web podemos hacer uso de los selectores de jquery y la función addClass y removeClass.
A continuación anexo el código que permite hacer esto.
Css
#menu .opcion{
width:20%;
float:left;
cursor:pointer;
background:#ddd;
color:#000;
padding:5px 0px 5px 0px;
text-align:center;
}
#menu .opcionActiva{
background:#000;
color:#fff;
}
Html
<div id="menu">
<div class="opcion">opción 1</div>
<div class="opcion">opción 2</div>
<div class="opcion">opción 3</div>
<div class="opcion">opción 4</div>
<div class="opcion">opción 5</div>
</div>
Javascript
$(document).ready(function(){
//selector a la clase opcion para darle función al evento click
$(".opcion").click(function(){
//eliminamos la clase activa por si una opción la contiene
$(".opcion").removeClass("opcionActiva");
//asignamos la clase opcionActiva a la opción presionada
$(this).addClass("opcionActiva")
})
})
Simplemente hago uso de addClass y removeClass de jquery para añadir o remover la clase de CSS opcionActiva.
La función addClass sirve para agregar una clase de css a un elemento y la función removeClass sirve para lo contrario.
