Nota: Després de desar, heu de netejar la memòria cau del navegador per veure els canvis. En la majoria de navegadors amb Windows o Linux, premeu Ctrl+F5 o bé premeu Shift i cliqueu el botó "Actualitza" (Ctrl i "Actualitza" amb Internet Explorer). Vegeu més informació i instruccions per a cada navegador a Viquipèdia:Neteja de la memòria cau.

window.onload = function () {
    //---------------------------------------------------------
    // FUNCIONS D'AJUDA
    //---------------------------------------------------------
    
    // Pren tots els subelements de 'element' ignorant altres
    // subelements que no ens interessen (com comentaris o text).
    // Torna una llista de subelements.
    function PrendreSubElements(element) {
        var resultat = [];                      // llista per al resultat;
        var childNodes = element.childNodes;    // llista de subelements
        var n = childNodes.length;              // nombre de subelements
        
        for (var i = 0; i < n; i++) {
            // si el subelement 'i' es un element dels que busquem
            if (childNodes[i].nodeType == 1) {
                // el guardem en la llista
                resultat.push(childNodes[i] );
            }
        }
        
        return resultat; // tornem la llista de subelements que volem
    }
    
    // Afegix codi a tots els botons per a que es cride a la funció
    // MostrarPestanya quan es faça click sobre un botó.
    function AfegirEventsBotons() {
        var n = botons.length;
        for (var i = 0; i < n; i++) {
            botons[i].onclick = MostrarPestanya;
            botons[i].contingut = continguts[i];
        }
    }
    
    // Mostra una pestanya amagant la resta. 'this' conté
    // el botó sobre el que se ha fet click.
    function MostrarPestanya() {
        // amaguem totes les pestanyes
        var n = continguts.length;
        for (var i = 0; i < n; i++) {
            continguts[i].style.display = "none";
        }
        // mostrem la pestanya corresponent
        this.contingut.style.display = "";
    }
    
    //---------------------------------------------------------
    // CODI PRINCIPAL
    //---------------------------------------------------------
    
    // Buscar l'element pel seu ID. De moment, solament podem tindre
    // UNA caixa, ja que els ID han de ser únics al codi html.
    var caixaPestanyes = document.getElementById("caixaPestanyes");
    // si no existeix, eixim del programa
    if (!caixaPestanyes) return;
    
    // Asociar els subelements amb variables. Este codi depén de 
    // l'estructura dels DIV. Dóna per suposat que el DIV principal 
    // conté dos DIV:
    //     el primer conté els DIV botons
    //     el segon els DIV de contingut
    var subElements = PrendreSubElements(caixaPestanyes);
    var capaBotons      = subElements[0]; // primer subelement
    var capaContinguts  = subElements[1]; // segon subelement
    // tornem a repetir la faena per a trobar els botons i els continguts
    var botons      = PrendreSubElements(capaBotons);
    var continguts  = PrendreSubElements(capaContinguts);
    
    // afegim el codi necessari als botons
    AfegirEventsBotons();
    // fem click sobre el primer botó
    MostrarPestanya.call(botons[0]);
};