Stefan H.: Bei onclick mehrere DIVs ändern

Hallo zusammen!

Ich habe eine Frage, die ich selbst zwar lösen könnte, allerdings wäre das sehr umständlich. Daher hoffe ich, dass mir jemand eine einfache Lösung anbieten kann.

1: Ich habe eine Liste A mit Links; jeder Link führt zu einem Listeneintrag in Liste B.
2: Ich habe eine zweite Liste B mit mehreren Listeneinträgen.
2: Jeder Listeneintrag in B beinhaltet eine div.

Wenn nun Link A1 klicke, springt die Seite zum Anker "B1" (erster Listeneintrag der zweiten Liste). Gleichzeitig ändert sich der Rahmen der div B1div zu rot.

Bis hierhin klappt alles.

Jetzt meine Frage: Wenn nun Link A2 geklickt wird, soll sich erstens die Rahmenfarbe von B2div zu rot ändern (das stellt kein Problem dar) und zweitens die Rahmenfarbe aller anderen divs in dieser Liste "normalisieren". Quasi soll immer nur die aktuelle div rot sein, alle anderen divs (nur in dieser Liste!) haben ihre normale Farbe.

Ich könnte natürlich jede einzelne div per ID ansprechen, aber bei einigen zig divs wird das schnell mühsam und unübersichtlich.

Geht das einfacher?

Vielen Dank im Voraus!

Grüße,

Stefan

  1. Hallo Stefan,

    Geht das einfacher?

    merk dir doch einfach, welchem Div du einen roten Rahmen gegeben hast.

    Gruß, Jürgen

    1. Hallo Jürgen,

      merk dir doch einfach, welchem Div du einen roten Rahmen gegeben hast.

      Für mich ist das kein Problem, aber die Besucher der Website haben damit vielleicht Probleme. Es geht um die Darstellung einzelner Spieler einer Handballmannschaft. Man soll also, wenn man auf den Namen in Liste A klickt, unten in Liste B angezeigt bekommen, wer der Spieler ist (man sieht zwar den Namen, aber ich wollte es einfach etwas deutlicher machen).

      Geht das denn nicht?

      1. Hi,

        Ich glaube eher, er wollte dir sagen, dass du im Javascript doch einfach eine Variable verwenden solltest, um dort dann das div mit dem roten rahmen hinterlegen kannst. Bei einer neuen aktion wandelst du also erst den roten div in einen grünen um und weist der variable dann den neuen roten div zu. Etwa so etwas

          
          
        var redDiv = null;  
          
        function updateDiv(newDiv){  
             if(redDiv) redDiv.style.border = "2px solid green"; // oder border style ""  
             if(newDiv) {  
                  newDiv.style.border = "2px solid red";  
                  redDiv = newDiv;  
              }  
        }  
          
        
        

        Gruss,
        H olger

        1. Hi,

          Ich glaube eher, er wollte dir sagen, dass du im Javascript doch einfach eine Variable verwenden solltest, um dort dann das div mit dem roten rahmen hinterlegen kannst. Bei einer neuen aktion wandelst du also erst den roten div in einen grünen um und weist der variable dann den neuen roten div zu.

          Das ist ja super. Nur verstehe ich nicht, wie ich das bei einem onclick-Event aurufe?

          Könntest du mir da auch noch einen Hinweis geben?

          Danke!

          Gruß,
          Stefan

          1. Das ist ja super. Nur verstehe ich nicht, wie ich das bei einem onclick-Event aurufe?

            Das war eine sehr dumme Frage, entschuldigt... Meine Frage war eigentlich eher eine andere:

            Ich habe im <a>-Tag ein onclick-Event. Das ruft
            document.getElementById('einzel-KnappMichael').style.border='3px solid red';
            auf. Wie bringe ich es nun aber dazu, zusätzlich noch die Funktion aufzurufen? Denn wenn nur die Funktion aufgerufen wird, passiert ja erstmal gar nichts...

            Danke und Gruß,
            Stefan

            1. So, bevor hier jetzt jeder raten muss, was ich wirklich will, ist hier mal der Code.

              <script language="javascript" type="text/javascript">

                
              var redDiv = null;  
                
              function updateDiv(newDiv){  
                   if(redDiv) redDiv.style.border = "3px solid green"; // oder border style ""  
                   if(newDiv) {  
                        newDiv.style.border = "3px solid red";  
                        redDiv = newDiv;  
                    }  
                
              }  
              
              ~~~~~~html
                
              </script>  
                
              </head>  
                
              <body>  
                  <div id="aufstellung-bild">  
                       <img src="/TVO/images/handballfeld.png" alt="" />  
                       <div id="spieler-pos-area">  
                              <div id="TW" class="spieler-pos">  
                                  <span id="span-TW">  
                                      <ul>  
                                          <li><a href="#SchwarzAlexander" onclick="document.getElementById('einzel-FoersterPeter').style.border='3px solid red';">Alexander Schwarz</a></li>  
                                          <li><a href="#FoersterPeter" onclick="document.getElementById('einzel-FoersterPeter').style.border='3px solid red';">Peter F&ouml;rster</a></li>  
                                      </ul>  
                                  </span>  
                              </div>  
                              <div id="LA" class="spieler-pos">  
                                  <span>  
                                      <ul>  
                                          <li><a href="#FathSteffen" onclick="document.getElementById('einzel-FathSteffen').style.border='3px solid red';">Steffen Fath</a></li>  
                                          <li><a href="#HerzogStefan" onclick="document.getElementById('einzel-HerzogStefan').style.border='3px solid red';">Stefan Herzog</a></li>  
                                      </ul>  
                                  </span>  
                              </div>  
              ...  
              
              

              Das ist die Liste, in der man klicken kann (die CSS-Eigenschaften lasse ich euch jetzt mal weg).

              Unten hat man dann eine weitere Liste, die per PHP generiert wird - für jeden Spieler ein Listeneintrag. Jeder Listeneintrag hat folgende "ID": "NachnameVorname" - jedoch ohne jegliche Sonderzeichen.

              Nun soll beim Klick auf Spieler A dessen Listeneintrags-div unten rot gefärbt werden.
              Wenn man nun auf einen weiteren Spieler B klickt, soll sich dessen Listeneintrags-div färben und die von Spieler A wieder entfärben. Usw.... Es soll also immer nur eine div rot sein.

              Ich habe jetzt verschiedenste Möglichkeiten ausprobiert und komme einfach nicht weiter.
              Da hoffe ich jetzt auf jemanden, der mehr Verständnis der Materie hat. :-)

              Nochmals: Danke!!

              1. Om nah hoo pez nyeetz, Stefan H.!

                eigentlich sollte updateDiv(document.getElementById('gewünschtes Element')) zielführend sein.

                Du könntest/solltest aber zugunsten von CSS auf JavaScript verzichten. Schau die die Pseudoklasse :target an.

                Matthias

                --
                1/z ist kein Blatt Papier.

                1. Om nah hoo pez nyeetz, Stefan H.!

                  ? ;-)

                  eigentlich sollte updateDiv(document.getElementById('gewünschtes Element')) zielführend sein.

                  Wenn ich es mit onclick="updateDiv(document.getElementById('SchwarzAlexander'));" versuche, passiert nichts. Was mache ich falsch?

                  Du könntest/solltest aber zugunsten von CSS auf JavaScript verzichten. Schau die die Pseudoklasse :target an.

                  Das werde ich mir, wenn alles wenigstens mal läuft, anschauen - danke für den Tipp!

                  Gruß,
                  Stefan

                  1. Hallo,

                    eigentlich sollte updateDiv(document.getElementById('gewünschtes Element')) zielführend sein.

                    Wenn ich es mit onclick="updateDiv(document.getElementById('SchwarzAlexander'));" versuche, passiert nichts. Was mache ich falsch?

                    Auszug aus deinem oben geposteten Code:

                    <li><a href="#SchwarzAlexander" onclick="document.getElementById('einzel-FoersterPeter').style.border='3px solid red';">Alexander Schwarz</a></li>

                    dort lautet das "ID-Schema" einzel-NachnameVorname. Du willst grade aber mit der ID NachnameVorname draufzugreifen. Mal abgesehen davon dass in dem Beispiel der falsche Name steht.

                    Gruß,
                    Stefan

                    martachen

                    1. dort lautet das "ID-Schema" einzel-NachnameVorname. Du willst grade aber mit der ID NachnameVorname draufzugreifen. Mal abgesehen davon dass in dem Beispiel der falsche Name steht.

                      Mein Gott, wie dumm!! -.-
                      Danke martachen!!

                      1. Hallo,

                        Ich wuerde mich auch Matthias anschliessen und versuchen Javascript zu vermeiden, wenn nicht unbedingt notwendig. Mit JavaScript kann man eigentlich alles machen, nur ist es oft eleganter und in vielen Dingen vorteilhafter, es ohne JavaScript zu realisieren. Hier ein Beispiel für dein Problem als CSS only Lösung:

                        Einfaches Beispiel

                        und noch etwas modifizierter

                        Einfaches Beispiel erweitert

                        Gruss,
                        H olger

                        1. Einfaches Beispiel

                          und noch etwas modifizierter

                          Einfaches Beispiel erweitert

                          Das sieht ja super aus! Das gefällt mir noch besser, weil es auch dann klappt, wenn der Benutzer kein JS aktiviert hat.

                          Danke vielmals!!

                          Gruß,
                          Stefan