Stefan H.: Bei onclick mehrere DIVs ändern

SELF-Forum

Bei onclick mehrere DIVs ändern

Stefan H.
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bei onclick mehrere DIVs ändern

    JürgenB Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Stefan,

    Geht das einfacher?

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

    Gruß, Jürgen

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bei onclick mehrere DIVs ändern

      Stefan H
      – Informationen zu den Bewertungsregeln

      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?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Bei onclick mehrere DIVs ändern

        H olger
        – Informationen zu den Bewertungsregeln

        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

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Bei onclick mehrere DIVs ändern

          Stefan H.
          – Informationen zu den Bewertungsregeln

          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

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Bei onclick mehrere DIVs ändern

            Stefan H.
            – Informationen zu den Bewertungsregeln

            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

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Bei onclick mehrere DIVs ändern

              Stefan H.
              – Informationen zu den Bewertungsregeln

              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!!

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Bei onclick mehrere DIVs ändern

                Matthias Apsel Homepage des Autors
                – Informationen zu den Bewertungsregeln

                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.

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Bei onclick mehrere DIVs ändern

                  Stefan H.
                  – Informationen zu den Bewertungsregeln

                  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

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Bei onclick mehrere DIVs ändern

                    martachen
                    – Informationen zu den Bewertungsregeln

                    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

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. Bei onclick mehrere DIVs ändern

                      Stefan H.
                      – Informationen zu den Bewertungsregeln

                      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!!

                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln

                      1. Bei onclick mehrere DIVs ändern

                        H olger
                        – Informationen zu den Bewertungsregeln

                        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

                        Beitrag melden
                        –
                        Informationen zu den Bewertungsregeln

                        1. Bei onclick mehrere DIVs ändern

                          Stefan H.
                          – Informationen zu den Bewertungsregeln

                          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

                          Beitrag melden
                          –
                          Informationen zu den Bewertungsregeln