<style>
#meses {width:150px;margin:0;padding:0;border:1px solid grey}
#meses li {cursor:pointer;padding:2px 10px}
.seleccionado {background-color:#808080;cursor:inherit !important;}
</style>
<ul id="meses"></ul>
<script>
var meses=Array('Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre');
// Recorremos el array con los meses y los ponemos en la pagina
meses.forEach(function(mes) { // Creamos un elemento <li> y añadimos en su interior el nombre del mes
var newLi=document.createElement("li"); newLi.innerHTML=mes;
// Creamos el evento click en cada uno de los meses
newLi.addEventListener("click",seleccionar);
// Añadimos el elemento li en la pagina
document.getElementById("meses").appendChild(newLi);});
// Función que se ejecuta cada vez que se pulsa sobre un mes dado
function seleccionar()
{ // Obtenemos los elementos <li> y los convertimos en un array
elementos=Array.prototype.slice.call(document.getElementById("meses").getElementsByTagName("li"));
// recorremos cada uno de ellos y eliminamos cualquier estilo
elementos.forEach(function(element) { element.className="";
});
// añadimos el estilo al elemento seleccionado
this.className="seleccionado";
}
</script>
Crear cuenta
Comentarios sobre la versión: Versión 1.0 (3)
Tenia dias tratando de solucionar eso.