Add Class Active

by Raúl Rojas

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>

CSS

#menu .opcion{
    width:20%;
    cursor:pointer;
    background:#ddd;
    color:#000;
    padding:5px 0px 5px 0px;
    text-align:center;
    margin-bottom:10px;
}
#menu .opcion:hover{
  background:red;
}
 
#menu .opcionActiva{
    background:#000 !important;
    color:#fff;
}

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")
 
    })
})