Wenn du deine Homepage hier anmeldest, wirst du noch viel mehr entdecken.
Die neuesten Themen
» PHP und MySQL!
von AnimeChen.de Gestern um 13:56

» Hilfe beim Layout / Design
von AnimeChen.de Gestern um 13:43

» HTML-Tutorial | Scrollboxen
von Neovine Mo 13 Nov 2017 - 22:50

» CSS/Javascript-Tutorial | Code markieren
von Neovine Mo 13 Nov 2017 - 22:00

» Die Anime School ist zurück!
von Dream Chaser Fr 10 Nov 2017 - 15:47

» Schloss Zauberbach
von Vongola HQ So 5 Nov 2017 - 21:55

» Welten und Orte im Forum
von ADO-finder So 5 Nov 2017 - 14:08

» Profilvorschau - Hover
von Neovine So 5 Nov 2017 - 0:02

» Hilfe gesucht beim Aufbau von Online-Zauberschule
von Schloss Zauberbach Sa 4 Nov 2017 - 18:56

» Einkaufs Formular
von ADO-finder Sa 4 Nov 2017 - 12:22

» ~Echsinea Island~
von Echsinea Sa 4 Nov 2017 - 11:43

» Designwechsel & Eventstart
von Neovine Mi 1 Nov 2017 - 13:03

» Forumieren - Pokémon Layout
von ADO-finder Mo 30 Okt 2017 - 8:17

» Unendlichen Hintergrund erstellen
von ADO-finder Mi 25 Okt 2017 - 20:07

» Aus dem Ruheschlaf zurück [Designwechsel und GFX]
von Vongola HQ Mi 25 Okt 2017 - 18:45

Webby-/ Admin Suche

Eine Anzeige hinzufügen

Alle Anzeigen ansehen


Tabs

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Tabs

Beitrag von Naisho no Sekái am Do 31 Aug 2017 - 9:10

Es ist momentan sehr verbreitet eine Textseite in Tabs aufzuteilen. Man hat mehrere Überschriften auf die man klicken kann und der Text verändert sich mit dem Klick. Doch alle Texte sind auf einer Textseite geschrieben und das macht es für die Bearbeitung sehr praktisch. Außerdem sieht es gut aus, und die Seite muss nicht neu geladen werden.

Code:
<table width="200" cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr>
            <td style="text-align: right;"><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen"><span style="color: rgb(79, 118, 97);"><span style="font-size: medium;"><strong>?London</strong></span></span></a></td>
            <td style="text-align: center;"><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Paris')"><span style="color: rgb(79, 118, 97);"><span style="font-size: medium;"><strong>?Paris</strong></span></span></a></td>
            <td style="text-align: left;"><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Tokyo')"><span style="color: rgb(79, 118, 97);"><span style="font-size: medium;"><strong>?Tokyo</strong></span></span></a></td>
        </tr>
    </tbody>
</table>
<p>&nbsp;</p>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

Das sieht nun erstmal recht Kompliziert aus, aber das ist es eigentlich nicht. London, Tokyo und Paris sind die Variablen die ihr bearbeiten könnt. Achtet darauf sie überall gleich zu schreiben. 
"London is the capital of England" ist einer der drei Beispieltexte. Hier könnt ihr reinschreiben was immer ihr wollt. Auch Tabellen und Bilder könnt ihr dort Platzieren.

Achtung: Der Code funktioniert nicht mit Internet Explorer
avatar
Naisho no Sekái

Kontaktperson : Eiki
Anzahl der Beiträge : 19
Anmeldedatum : 30.07.17

Benutzerprofil anzeigen http://geheimwelt.forumieren.de

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten