Pure Javascript,
HTML 5 & CSS3 Tabs
- Page 1
- Page 2
- Page 3
Page 1
Dieser Tab kann direkt im Text-Element geändert werden! Für die anderen Tabs müssen die Texte leider im html-Modus eingesetzt werden.
Das ist aber auch kein großes Problem:
- Ihr könnt den Code in einem anderen Textfeld generieren und per Copy&Paste übertragen...
HowToDo
Um das oben abgebildete JS-Tab-Element auf Deiner Seite einzurichten und anzupassen, gehst Du folgendermaßen vor:
1. HTML
Kopiere unten stehenden html-Code (strg+c) und setze ihn im html-Modus in ein neues Textelement auf Deiner Seite ein (strg+v):
<div id="tabWrapper">
<div id="tabContainer">
<div id="tabs">
<ul data-current="1">
<li id="tabHeader_1" class="tabActiveHeader">Page 1 </li>
<li id="tabHeader_2" class="tabActiveHeader">Page 2 </li>
<li id="tabHeader_3">Page 3 </li>
</ul>
</div>
<div id="tabscontent">
<div style="display: block;" class="tabpage" id="tabpage_1">
<h2> Page 1 </h2>
<p> Dieser Tab kann direkt über das Text-Element geändert werden... </p>
</div>
<div style="display: none;" class="tabpage" id="tabpage_2">
<h2> Page 2 </h2>
<p> Hier den html-code für Page2 einsetzen... </p>
</div>
<div style="display: none;" class="tabpage" id="tabpage_3">
<h2> Page 3 </h2>
<p> Hier den html-code für Page3 einsetzen... </p>
</div>
</div>
</div>
</div>
2. Head-Bereich
Im Head-Bereich Deiner Seite müssen das JS-Script und die CSS-Datei für die JS-Tabs eingebunden werden. Kopiere dazu folgenden Code (strg+c) und setze ihn im Head Bereich Deiner Webseite ein (Einstellungen > Head bearbeiten > strg+v)
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://redesign-berlin-tabtest.jimdo.com/app/download/12289549024/tabs.js" type="text/javascript">
</script>
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__test/redesign-tabtest/tabtest.css" rel="stylesheet"/>
Tipp: Du kannst auch die unten stehenden Dateien herunterladen und sie auf Deiner Webseite als "Datei-Download"-Element auf einer versteckten Seite wieder hochladen. Danach kannst Du die Download-Adressen der Dateien auf Deiner Seite im Head als Referenz angeben:
<script src="https://deineseite.com/app/download/.../tabs.js" type="text/javascript">
</script>
<link type="text/css" media="all" href="https://deineseite.com/app/download/.../tabtest.css" rel="stylesheet"/>
3. Tabs und Inhalte anpassen
Tabs-Benennung
Die Benennung der Tabs kann im html-Modus an im html-Modus Deines Tab-Elementes an folgenden Stellen geändert werden:
<li id="tabHeader_1" class="tabActiveHeader">Page 1</li>
<li id="tabHeader_2">Page 2</li>
<li id="tabHeader_3">Page 3</li>
...mit der Klasse "tabActiveHeader" kannst Du den "aktiven Tab" bestimmen
Überschriften
Die Überschriften im Tab-Content können im html-Modus hier geändert werden:
<h2 class="">Page 1</h2>
<h2 class="">Page 2</h2>
<h2 class="">Page 3</h2>
Tipp: Auf dem ersten Tab kann der Inhalt direkt über Dein Textelement geändert werden. Für die übrigen Tabs kannst Du Änderungen nur im html-Modus vornehmen.
Um den html-Code für Deinen Tab-Content zu erzeugen, kannst Du einfach ein neues Textelement unter dem Widget anlegen und dessen html-Code im html-Modus kopieren und an der richtigen Stelle im html-Code des Tab-Elementes einsetzen:
<p>Hier den html-code für Page2 einsetzen...</p>
<p>Hier den html-code für Page3 einsetzen...</p>
Das "Dummie"-Textelement kannst Du danach wieder löschen.