Wie Tabs in Basic-Theme einbauen?

Deutsches Forum
1

Hallo,
ich wollte testweise einmal Tabs auf der Produktdetailseite wie beim Azure-Theme einbauen. Ich habe mir dafür dieses Beispiel der Jquery Tools als Vorbild genommen. Den Codeblock innerhalb von <HTML> habe ich 1:1 übernommen, ebenfalls den CSS-Teil und den #include. Allerdings wird die Jquery-Funktion nicht getriggert. Die Tabs sind zu sehen, die Panes bleiben aber versteckt.

<ul class="css-tabs">
  <li><a id="t1" href="#tab1">Tab 1</a></li>
  <li><a id="t2" href="#tab2">Tab 2</a></li>
  <li><a id="t3" href="#tab3">Tab 3</a></li>
</ul>

<div class="css-panes">
  <div>
      Text
  </div>
 <div>
      Text
  </div>
 <div>
      Text
  </div>
</div>

<script>
  $(function() {
  // :first selector is optional if you have only one tabs on the page
  $(".css-tabs:first").tabs(".css-panes:first > div");
  });
</script>

Gruß, Stefan.

2

sowas?

http://www.oxidmodule.com/OXID-Professional-Community-4/Module-PE4/Content-Tabs-fuer-Oxid-PE4.html

3

Auf jeden Fall ohne eine Liste und selbst gecodet, dafür braucht man wirklich kein Plugin sondern nur JQuery. Sieh Dir mal bitte den nicht gerenderten Quelltext (ohne Firebug an).

Hier http://www.meinestruempfe.de/out/meine_struempfe/src/global.js

Dort ist die Funktion initTabBoxes von Bedeutung.

HTML-Struktur wie folgt:


<div class="bigtabbox">
<h2>Tab1</h2>
<div class="box">
</div>
<h2>Tab2</h2>
<div class="box">
</div>
<h2>Tab3</h2>
<div class="box">
</div>
</div>