Und Ihr seht die jQuery-Tabs hier sofort im Einsatz:

// Aufbau der TAB-Links und Tab-Beschriftungen der aktuellen Seite
lib.jquery-tab = COA
lib.jquery-tab {
   10 = HMENU
   10 {
      special = list
      special.value.field = uid
      1 = TMENU
      1 {
         expAll = 1
         NO {
            doNotShowLink = 1
            stdWrap.cObject = LOAD_REGISTER
            stdWrap.cObject {
               allPages.field = uid
               allPages.dataWrap = {register:allPages},|
            }
         }
      }
   }

   # Nur die Datensätze in die Tabs, die in dem Gridelement eingetragen sind:
   20 = COA
   20.10 = LOAD_REGISTER
   # hier werden die uid der Seite und des übergeordneten DS gefunden
   20.10 {
      gridelements_container.field = uid
      gridelements_container.dataWrap = |
   }
   20.20 = CONTENT
   20.20 {
      table = tt_content
      select {
        pidInList.data = register:allPages
        orderBy = sorting
        languageField = sys_language_uid
        andWhere.data = register:gridelements_container
        andWhere.wrap = (tx_gridelements_container IN (|))
      }
      renderObj = TEXT
      renderObj.dataWrap = <li class='tab'><a href="#c{field:uid}">{field:header}</a></li>
    }
  stdWrap.dataWrap = <ul class='etabs'>|</ul><div class="panel-container">
}

// GRIDElement beschreiben, man achte auf die ID!
tt_content.gridelements_pi1.20.10.setup {
   # ID of gridelement
   jquery-tabs >
   jquery-tabs < lib.gridelements.defaultGridSetup
   jquery-tabs {
      columns {
         # colPos ID
         11 < .default
         11.prepend < lib.jquery-tab
      }
      stdWrap.outerWrap.cObject = TEMPLATE
      stdWrap.outerWrap.cObject {
         template = TEXT
         template.value (
            <div id="jQueryTabs_###UID###" class="tab-container">|</div></div>
            <script type="text/javascript">
               $( "#jQueryTabs_###UID###" ).easytabs();
            </script>
         )
         marks.UID = TEXT
         marks.UID.field = uid
      }
   }
}

Hier sehen Sie nur ein Bild, welches natürlich nicht bedienbar ist (Die Tabs sind nicht klickbar!)

Die Tabs lassen sich nun mehrfach schachteln. Wer mag, der schaue sich das Ganze live auf der Seite »Tabs geschachtelt« an.

bessere Darstellung CSS

Zur besseren Darstellung kann man die tabs.css von os.alfajango.com einbinden. Es hilft in der Standard-Darstellung und natürlich das JScript von alfajango EasyTabs

page.headerData.3123 = TEXT
page.headerData.3123.value (
   <link rel="stylesheet" href="http://os.alfajango.com/css/tabs.css">
   <script src="fileadmin/jscripts/jquery.easytabs.min.js" type="text/javascript"></script>
)

Anstatt der headerData-ID 3123 könnt Ihr natürlich eine für Euch passende Ziffernfolge wählen.