Toggle Tabs - geht's noch einfacher?

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Toggle Tabs - geht's noch einfacher?

    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?

    Quellcode

    1. <HTML>
    3. <HEAD>
    4. <TITLE>Tab Test</TITLE>
    5. <META NAME="robots" CONTENT="noindex">
    6. <SCRIPT TYPE="text/javascript">
    7. function toggle1() {
    8. document.getElementById('tab1').style.display = "block";
    9. document.getElementById('tab2').style.display = "none";
    10. document.getElementById('tab3').style.display = "none";
    11. document.getElementById('tab4').style.display = "none";
    12. document.getElementById('tab5').style.display = "none";
    13. }
    15. function toggle2() {
    16. document.getElementById('tab1').style.display = "none";
    17. document.getElementById('tab2').style.display = "block";
    18. document.getElementById('tab3').style.display = "none";
    19. document.getElementById('tab4').style.display = "none";
    20. document.getElementById('tab5').style.display = "none";
    21. }
    23. function toggle3() {
    24. document.getElementById('tab1').style.display = "none";
    25. document.getElementById('tab2').style.display = "none";
    26. document.getElementById('tab3').style.display = "block";
    27. document.getElementById('tab4').style.display = "none";
    28. document.getElementById('tab5').style.display = "none";
    29. }
    31. function toggle4() {
    32. document.getElementById('tab1').style.display = "none";
    33. document.getElementById('tab2').style.display = "none";
    34. document.getElementById('tab3').style.display = "none";
    35. document.getElementById('tab4').style.display = "block";
    36. document.getElementById('tab5').style.display = "none";
    37. }
    39. function toggle5() {
    40. document.getElementById('tab1').style.display = "none";
    41. document.getElementById('tab2').style.display = "none";
    42. document.getElementById('tab3').style.display = "none";
    43. document.getElementById('tab4').style.display = "none";
    44. document.getElementById('tab5').style.display = "block";
    45. } </SCRIPT>
    46. </HEAD>
    48. <BODY>
    49. <TABLE BORDER="1">
    50. <TR>
    51. <TD WIDTH="20%"><A HREF="javascript:toggle1()">Reiter 1</A></TD>
    52. <TD WIDTH="20%"><A HREF="javascript:toggle2()">Reiter 2</A></TD>
    53. <TD WIDTH="20%"><A HREF="javascript:toggle3()">Reiter 3</A></TD>
    54. <TD WIDTH="20%"><A HREF="javascript:toggle4()">Reiter 4</A></TD>
    55. <TD WIDTH="20%"><A HREF="javascript:toggle5()">Reiter 5</A></TD>
    56. </TR>
    57. <TR>
    58. <TD COLSPAN="5">
    59. <DIV ID="tab1">
    60. <P>Text zu Reiter 1 </P>
    61. </DIV>
    62. <DIV ID="tab2" STYLE="display: none">
    63. <P>Text zu Reiter 2 </P>
    64. </DIV>
    65. <DIV ID="tab3" STYLE="display: none">
    66. <P>Text zu Reiter 3 </P>
    67. </DIV>
    68. <DIV ID="tab4" STYLE="display: none">
    69. <P>Text zu Reiter 4 </P>
    70. </DIV>
    71. <DIV ID="tab5" STYLE="display: none">
    72. <P>Text zu Reiter 5 </P>
    73. </DIV></TD>
    74. </TR>
    75. </TABLE>
    76. </BODY>
    78. </HTML>
    Alles anzeigen


    Danke für Eure Hilfe

    Marc

  • Ich verstehe nicht ganz enau , was du mit "verlinken" meinst.

    Ich denke es wäre nicht schlecht auf ein Framework zu setzen, wenn du mehr vor hast.

    Hier sind ein paar interessante Beiträge dazu:
    JavaScript-Frameworks im User-Test


    Und hier wäre das Accordion Beispiel mit jQuery.
    jqueryui.com/demos/accordion/

    Kostet nichts, ist einfach zu integreiren und sieht schön aus.

    Andere Frameworks bieten ähnliche oder die gleiche Funktionalität.
    Ein Blick lohnt sich immer :)

  • vince schrieb:

    Ich verstehe nicht ganz enau , was du mit "verlinken" meinst.

    Naja, ich würde mich einfach über ein Anwendungsbeispiel freuen. Sorry, hab mich wohl zu laienhaft ausgedrückt.

    vince schrieb:

    Ich denke es wäre nicht schlecht auf ein Framework zu setzen, wenn du mehr vor hast.

    Danke für den Hinweis. Mehr hab ich zwar nicht vor, aber kann schon interessant sein, da ein Framework ja wirklich umfassende Möglichkeiten bietet. Mir geht es aber darum, den Code so schlank und übersichtlich wie möglich zu halten. Deshalb meine obigen Versuche.

    Wenn's also noch "dünner" ginge, würde ich mich freuen.