Würden Sie gerne auf diese Nachricht reagieren? Erstellen Sie einen Account in wenigen Klicks oder loggen Sie sich ein, um fortzufahren.

Tabs

 :: Aufbauhilfe :: Tutorials :: Coding

Nach unten

Tabs               Empty Tabs

Beitrag von Gast 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

Gast
Gast


Nach oben Nach unten

Nach oben


 :: Aufbauhilfe :: Tutorials :: Coding

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