Wenn du deine Homepage hier anmeldest, wirst du noch viel mehr entdecken.
Die neuesten Themen
» Homepage Baukästen im Vergleich
von ADO-finder Gestern um 17:37

» Klickpage-Idee | Zoomania World
von Naisho no Sekái Di 19 Sep 2017 - 16:46

» School-Idee | Ghibli Zauberschule
von Naisho no Sekái Di 19 Sep 2017 - 16:23

» School-Idee | Dragonball Kampfschule
von Naisho no Sekái Di 19 Sep 2017 - 16:10

» School-Idee | Elementeschule
von Naisho no Sekái Di 19 Sep 2017 - 16:02

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 : 17
Anmeldedatum : 30.07.17

Benutzerprofil anzeigen http://geheimwelt.bplaced.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