Mit Tabs (auch bekannt als Registerkarten) kann man lange Seiten übersichtlicher gestalten. Anfangs wird nur ein Teil des Inhalts dargeboten – der aktive Tab. Die Besucherin sieht zugleich die anderen – nicht aktiven – Tabs. Klickt der Besucher auf einen nicht aktiven Tab, wird der "nach vorne geholt", zugehörige Textkörper sichtbar gemacht. Diese Seite selbst ist ein Beispiel.

Dies ist der Tab "Funktion". Mit Tabs (auch bekannt als Registerkarten) kann man lange Seiten übersichtlicher gestalten. Anfangs wird nur ein Teil des Inhalts dargeboten – der aktive Tab. Die Besucherin sieht zugleich die anderen – nicht aktiven – Tabs. Klickt der Besucher auf einen nicht aktiven Tab, wird der "nach vorne geholt", zugehörige Textkörper sichtbar gemacht. Diese Seite selbst ist ein Beispiel.

1. Zunächst bearbeiten Sie den Inhalt. Dabei erzeugen Sie für jeden künftigen Tab ein neues Inhaltselement vom Typ Text & Media. Jedes Inhaltselement hat eine Überschrift vom Typ Layout 2.
2. Notieren Sie sich die IDs der Inhaltselemente, die Tabs werden sollen.
3. Für die Tabs erzeugen Sie ein neues Inhaltselement vom Typ HTML und kopieren den Inhalt der Tabs JavaScript und CSS hinein.
4. In der JavaScript-Zeile, die beginnt mit var panels = ersetzen Sie die Liste der Zahlen zwischen den eckigen Klammern durch die IDs Ihrer Inhaltselemente, und zwar mit Kommata getrennt.

<script>
  // Hier die IDs der Inhaltselemente eintragen
  var panels = [85184,85186,85187];
  // sonst unverändert lassen
  var headings = [];
  var tabs = [];
  var currentpanel;
  
  $(document).ready(function(){
    for (i = 0; i < panels.length; i++) {
        $( "#c"+panels[i] ).addClass( "panel" );
        headings[i] = $( "#c" + panels[i] + " > h2").text( );
        tabs[i] = "<li id='t" + panels[i] + "'>" + headings[i] + "</li>";
    }
    $( "#tabs" ).prepend( tabs.join("") );
    $( "#tabs li#t" + panels[0] ).addClass( "active" );
    $( "div#c" + panels[0] ).addClass( "active" );
    $( "#tabs li" ).click(function(e){
        $(".active").toggleClass("active");
        $( this ).toggleClass("active");
        currentpanel = "#c" + e.target.id.substring(1,e.target.id.length);
        $( currentpanel ).toggleClass("active");
    });
  });
</script>

<ul id="tabs">
</ul>

Dieses Inhaltselement ist nicht in die Liste der Tabs aufgenommen und steht deshalb permanent unverändert.