Cambiar <li class="active"> al hacer click en otro link del menu en la misma pagina

[erfrancis]

Muy buenas;

Añado el tema dentro del lenguaje javascript porque diria que habría de realizarse con el mismo.

Tengo un menu con tres opciones las cuales muestran y ocultan divs al hacer click en ellas dentro de un mismo documento html. Algo parecido a simularía cargar iframes al clickear sobre una de las tres opciones del menu.

El problema viene a la hora de la class active.

Os pongo el código:

<div id='cssmenu'>
<ul>
<li class="active"><a class="contenido"><span>opcion1menu</span></a></li>
<li><a class="contenido1"><span>opcion2menu</span></a></li>
<li><a class="contenido3"><span>opcion3menu</span></a></li>
</ul>
</div>

La clase active tiene determinado un css específico, el problema viene cuando hago click sobre "opcion2menu" o "opcion3menu" que si me muestra el contenido del div oculto, pero no me cambia el estilo css "active" quedando siempre en la "opcion1menu".

No se si me he explicado bien, pero básicamente me gustaría si pudieran ayudarme a que cuando haga click en cualquier de las tres opciones de ese menu la class "active" cambie hacia la opcion en la que se haga click modificacandole su estilo css, pero todo esto dentro de un mismo documento.

Se que se puede hacer manualmente, añadiendole class="active" a cualquiera de los tres pero deberían ser 3 documentos diferentes para que funcionara, y yo necesitaria que esto ocurra dentro de un mismo documento.

Diria que con css solamente no se puede hacer, alguna idea?? he probado con a:active pero solo cambia el estilo durante el tiempo que se pulsa con el ratón, en el momento que se suelta vuelve al estado anterior, me gustaría algo así pero que lo modificase de forma permanente hasta volver a hacer click en otra de las opciones de menu.

Agradezco mucho cualquier ayuda! un saludo y gracias de antemano!!

[Alexis88]

Podrías hacerlo así:

Código Javascript:

var li = document.getElementsByTagName("li"),
    forEach = Array.prototype.forEach;
 
window.addEventListener("click", function(e){
    forEach.call(li, function(a){
        a.className = a === e.target ? "active" : "";
    });
}, false);
 

Tomas a todos los elementos <li> y define el método forEach. Luego, cuando demos un clic en cualquier parte del documento, aplicamos el método que acabamos de crear a la lista de nodos <li>. En cada iteración, verificaremos si el elemento al que se le dio el clic es igual a uno de los de la lista, de serlo, le asignamos la clase active, caso contrario, lo dejamos sin nombre de clase. Si gustas, puedes usar las estructuras repetitivas tradicionales como for o while en lugar del forEach.

DEMO

También es posible elaborar tabs o pestañas solamente con CSS:

DEMO
Código

Saludos