Hallo,
ich habe mich auf die Suche nach einem möglichst einfachen Script gemacht, das es ermöglicht, die Toggle-Funktion nicht im fortlaufenden Text, sondern in Form von Tabs darzustellen. Leider waren die Scripte im Netz entweder für mich als JS-Laien schlecht kommentiert, unvollständig oder nur gegen Bares zu haben.
Also habe ich mich daran gesetzt und das Ganze mal ohne irgendwelche Layout-Formatierungen selbst in eine Datei geschrieben. Und in der Tat: Es funktioniert!
Für Profis sieht der Script-Teil bestimmt reichlich ungelenk aus. Daher meine Frage: Kann man das auch noch eleganter und vor allem mit noch weniger Code lösen?
Alles anzeigen
Danke für Eure Hilfe
Marc
ich habe mich auf die Suche nach einem möglichst einfachen Script gemacht, das es ermöglicht, die Toggle-Funktion nicht im fortlaufenden Text, sondern in Form von Tabs darzustellen. Leider waren die Scripte im Netz entweder für mich als JS-Laien schlecht kommentiert, unvollständig oder nur gegen Bares zu haben.
Also habe ich mich daran gesetzt und das Ganze mal ohne irgendwelche Layout-Formatierungen selbst in eine Datei geschrieben. Und in der Tat: Es funktioniert!
Für Profis sieht der Script-Teil bestimmt reichlich ungelenk aus. Daher meine Frage: Kann man das auch noch eleganter und vor allem mit noch weniger Code lösen?
Quellcode
- <HTML>
- <HEAD>
- <TITLE>Tab Test</TITLE>
- <META NAME="robots" CONTENT="noindex">
- <SCRIPT TYPE="text/javascript">
- function toggle1() {
- document.getElementById('tab1').style.display = "block";
- document.getElementById('tab2').style.display = "none";
- document.getElementById('tab3').style.display = "none";
- document.getElementById('tab4').style.display = "none";
- document.getElementById('tab5').style.display = "none";
- }
- function toggle2() {
- document.getElementById('tab1').style.display = "none";
- document.getElementById('tab2').style.display = "block";
- document.getElementById('tab3').style.display = "none";
- document.getElementById('tab4').style.display = "none";
- document.getElementById('tab5').style.display = "none";
- }
- function toggle3() {
- document.getElementById('tab1').style.display = "none";
- document.getElementById('tab2').style.display = "none";
- document.getElementById('tab3').style.display = "block";
- document.getElementById('tab4').style.display = "none";
- document.getElementById('tab5').style.display = "none";
- }
- function toggle4() {
- document.getElementById('tab1').style.display = "none";
- document.getElementById('tab2').style.display = "none";
- document.getElementById('tab3').style.display = "none";
- document.getElementById('tab4').style.display = "block";
- document.getElementById('tab5').style.display = "none";
- }
- function toggle5() {
- document.getElementById('tab1').style.display = "none";
- document.getElementById('tab2').style.display = "none";
- document.getElementById('tab3').style.display = "none";
- document.getElementById('tab4').style.display = "none";
- document.getElementById('tab5').style.display = "block";
- } </SCRIPT>
- </HEAD>
- <BODY>
- <TABLE BORDER="1">
- <TR>
- <TD WIDTH="20%"><A HREF="javascript:toggle1()">Reiter 1</A></TD>
- <TD WIDTH="20%"><A HREF="javascript:toggle2()">Reiter 2</A></TD>
- <TD WIDTH="20%"><A HREF="javascript:toggle3()">Reiter 3</A></TD>
- <TD WIDTH="20%"><A HREF="javascript:toggle4()">Reiter 4</A></TD>
- <TD WIDTH="20%"><A HREF="javascript:toggle5()">Reiter 5</A></TD>
- </TR>
- <TR>
- <TD COLSPAN="5">
- <DIV ID="tab1">
- <P>Text zu Reiter 1 </P>
- </DIV>
- <DIV ID="tab2" STYLE="display: none">
- <P>Text zu Reiter 2 </P>
- </DIV>
- <DIV ID="tab3" STYLE="display: none">
- <P>Text zu Reiter 3 </P>
- </DIV>
- <DIV ID="tab4" STYLE="display: none">
- <P>Text zu Reiter 4 </P>
- </DIV>
- <DIV ID="tab5" STYLE="display: none">
- <P>Text zu Reiter 5 </P>
- </DIV></TD>
- </TR>
- </TABLE>
- </BODY>
- </HTML>
Danke für Eure Hilfe
Marc