Podrías hacerlo así:
Código Javascript
:
Ver originalvar 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