Mehere Container selektiv ansteuern

  • Ich habe 3 Container die ich über einen href individuell sichbar machen möchte,Ich kann mit dem beigefügten Code die einzenen Contasiner ansteuern.
    Aber:


    Wenn ich ZUERST auf Cont3 klicke, kann ich danach auch auf Cont2 klicken und danach auf Cont1 mit der entsprechenden Anzeige dann


    Wenn ich jetzt auf Cont2 klicke, kann ich danach auch auf Cont1 klicken, klicke ich auf Cont3, damnn passiert nichts.


    Wenn ich ZUERST auf Cont1 klicke, dann erscheint der entsprechende Container aber ein darauffogendes Anklicken von Cont2 oder Cont3 funktioniert nicht.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>2 container</title>
    <meta name="author" content="chef">
    <meta name="editor" content="html-editor phase 5">
    </head>


    <script>
    function show_elements()
    {
    var elementNames = show_elements.arguments;
    for (var i=0; i<elementNames.length; i++)
    {
    var elementName = elementNames;
    document.getElementById(elementName).style.display='block';
    }
    }
    </script>


    <style>


    * { margin:0px; padding:0px;}


    html, body { height: 100%;}
    body{ font-family: verdana;background: #F8F2E2;
    background: linear-gradient(left, #F8F2E2 0%, #F7BE81 99%, #F7BE81 100%);
    background: -webkit-linear-gradient(left, #F8F2E2 0%, #F7BE81 99%, #F7BE81 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F8F2E2, endColorstr=#F7BE81,GradientType=1); }
    #wrapper{ width: 1050px; height: 100%; margin: 0px auto;}
    #platzhalter{ width:100%; height:150px; float:left;}



    #sidebar .submenu{margin-top: 30px; width: 23% ; float: left; height: 100%;}
    #sidebar .submenu li{ float: left; height: 60px;}
    #sidebar .submenu li a{list-style-type:circle; text-decoration:none; font-size:16px; font-weight:400; text-align:left;
    line-height:20px; color: black; display:block; float:left; width:250px;
    }


    #cont1 {
    width: 75%;
    float: left;
    height: 100%;
    color: black;
    display:none;
    }


    #cont2 {
    width: 75%;
    float: left;
    height: 100%;
    color: black;
    display:none;
    }
    #cont3 {
    width: 75%;
    float: left;
    height: 100%;
    color: black;
    display:none;
    }


    </style> <body>


    <div id="wrapper">
    <div id="platzhalter"> Platzhalter für Header </div>


    <section id="sidebar">


    <ul class="submenu">
    <li><a href="#"onClick="show_elements('cont1');">C1</a></li>
    <li><a href="#"onClick="show_elements('cont2');">C2</a></li>
    <li><a href="#"onClick="show_elements('cont3');">C3</a></li>


    </ul>


    </section>


    <div id ="cont1"> Hier ist C1!</div>
    <div id ="cont2"> Hier ist C2!</div>
    <div id ="cont3"> Hier ist C3!</div>


    </div>
    </body>
    </html>


    Was ist zu tun?


    Freundliche Grüße und ein frohes Fest


    Jochen


  • Einfacher ist es, den Parameter bei der Definition der Funktion direkt anzugeben. Ich hoffe, dies ist das, was Du erreichen wolltest:

    JavaScript
    1. function show_elements(id) { var conts = document.querySelectorAll("div[id^='cont']");
    2. for (var i = 0; i < conts.length; i++) {
    3. if (conts[i].id == id) conts[i].style.display = "block";
    4. else conts[i].style.display = "none";
    5. } }


    Und benutze in Zukunft Code-Tags. Das

    JavaScript
    1. [i]

    wurde als BB-Code für "italic" interpretiert und verschluckt.

  • Beim Beitrag erstellen oder beantworten gibt es diese schwarzen Buttons. Da mal drüber hovern, dann steht da, für was die sind. Text markieren und passenden Button klicken - fertig!


    Zu deinem Script:
    Du übergibst die Parameter, die aber von der Funktion garnicht erwartet werden.
    Ich habe mal ein Testscript erstellt; weicht etwas von deinem ab, aber es geht ja um die Funktion:

  • Hab wohl etwas falsch gemacht. Vielleicht bin ich durcheinander gekommen mit cont, conts usw. Ich muss auch zugeben ich habe die Idee verstanden aber die umsetzung verstanden in der Funktion zeile
    var conts = document.querySelectorAll("div[id^='cont']");


    da steht auf einmal cont während später conts gebraucht wird, ich selber auch cont in meinem code hatte.


    Wenn du den Code noch hättest würde ich ihn gerne erhalten, da ich den Ansatz mit querySelectorAll interessant finde
    und ich ihn sicher irgendwo noch einmal sinnvoll einsetzen kann.


    Dir auch ein schönes Fest und ein tolles 2017


    Jochen

  • Leider verschluckt das Forum einen Teil der Zeilenumbrüche. Hier noch Mal der Code ohne Code-Tags:
    function show_elements(id) {
    var conts = document.querySelectorAll("div[id^='cont']");
    for (var i = 0; i < conts.length; i++) {
    if (conts[i].id == id) conts[i].style.display = "block";
    else conts[i].style.display = "none";
    }
    }
    Das "^" in document.querySelectorAll("div[id^='cont']") gibt an, dass die ID mit "cont" beginnt,
    d. h. dieser Selektor erkennt Übereinstimmung für "cont1", "cont2", "cont3" und ggf. weiter so.
    In "var conts" ist conts nur ein Name, er ist mehr oder weniger beliebig und könnte genau so gut a oder x sein.
    Aber es ist guter Stil, Variablennamen so festzulegen, dass zu erkennen ist, worum es sich handelt, daher habe ich conts gewählt.
    Diese Lösung hat den Vorteil, dass man nur das HTML zu erweitern braucht, wenn man neue Container hinzufügt und nichts
    am Javascript ändern muss.

    Dir gleichfalls frohe Weihnachten und ein gutes 2017!