Tabs
:: Aufbauhilfe :: Tutorials :: Coding
Seite 1 von 1
Tabs
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.
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
- 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> </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
:: Aufbauhilfe :: Tutorials :: Coding
Seite 1 von 1
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten