Wenn du deine Homepage hier anmeldest, wirst du noch viel mehr entdecken.
Neueste Themen
» One piece - The New World
von One Piece - The new World Mi 11 Sep 2019 - 3:22

» Echsinea Island im neuen Gewand
von Echsinea Di 23 Jul 2019 - 10:51

» Hakuno: Map-Builder und Character-Builder
von hakuno Di 21 Mai 2019 - 21:50

» Mai, der Monat der Musik
von Geheimwelt.FM So 5 Mai 2019 - 18:37

» Music of Death meldet sich zum Dienst!
von Music of Death Do 14 März 2019 - 18:52

» Artikel 13 und der Uplodfilter.
von AnimeChen.de Do 28 Feb 2019 - 21:20

» Shayvo World
von Shayvo World So 11 Nov 2018 - 17:00

» Hilfe gesucht für Design (CSS)
von Neovine Mi 18 Jul 2018 - 19:51

» Eigene Domain+ SSL und Datenschutzanpassung
von Blossom Lounge Di 22 Mai 2018 - 22:30

» Shima no Koji - where the adventure begins!
von Shima no Koji Do 29 März 2018 - 14:36

» Wo ist die Seite hin??? DC Lost
von Dream Chaser Di 13 März 2018 - 23:59

» Crossover RPG | Rise of the Brave Tangled Frozen Dragons at Hogwarts
von Geheimwelt.FM Di 13 März 2018 - 10:37

» Nützliche Seiten
von Gast Di 6 März 2018 - 8:51

» Lizenzfreie Bilder
von Gast Di 6 März 2018 - 8:38

» Usersuche
von Echsinea Mo 26 Feb 2018 - 14:19

Webby-/ Admin Suche

Eine Anzeige hinzufügen

Alle Anzeigen ansehen


Tabs

Nach unten

Tabs               Empty Tabs

Beitrag von Geheimwelt.FM 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
Geheimwelt.FM
Geheimwelt.FM

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

Benutzerprofil anzeigen http://laut.fm/geheimwelt

Nach oben Nach unten

Nach oben


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