1 display öffnen und alle anderen schließen

[Eydamos]

Ich habe zwar schon ein Script hinbekommen, das macht, was ich will, indem ich ein Script, das ich im Inet gefunden habe verändert habe. Aber es ist mir eindeutig zu lang und deswegen würde ich es gerne irgendwie kürzen. Da ich mich mit JavaScript absolut nicht auskenne übersehe ich warscheinlich zig einfachere Scripts. Ich habe ein paar Kommentare hinzugefügt, die hoffentlich helfen es zu vereinfachen.

  
function tausch(aktiv)  
{  
 var obj1 = "";  
 var obj2 = "";  
 var obj3 = "";  
 var obj4 = "";  
 var obj5 = "";  
  
 //das habe ich so übernommen, weiß nicht ob man das heute überhaupt noch braucht früher war das ja glaube ich wegen Netscape oder?  
 if(document.getElementById)  
 {  
  //Das brauche ich ja auf jeden Fall, statt der Namen kann ich auch Zahlen nehmen wenn das dann einfacher zu machen ist  
  obj1 = document.getElementById("gebaeude");  
  obj2 = document.getElementById("foerderung");  
  obj3 = document.getElementById("flotte");  
  obj4 = document.getElementById("produktion");  
  obj5 = document.getElementById("systeme");  
 }  
 else if(document.all)  
 {  
  obj1 = document.all["gebaeude"];  
  obj2 = document.all["foerderung"];  
  obj3 = document.all["flotte"];  
  obj4 = document.all["produktion"];  
  obj5 = document.all["systeme"];  
 }  
 else if(document.layers)  
 {  
  obj1 = document.layers["gebaeude"];  
  obj2 = document.layers["foerderung"];  
  obj3 = document.layers["flotte"];  
  obj4 = document.layers["produktion"];  
  obj5 = document.layers["systeme"];  
 }  
 else  
  return;  
  
 //Hier dann der eigentliche wechsel der displays ich denke das müsste auch einfacher gehen  
 if(aktiv == 1)  
 {  
 obj1.style.display =  "";  
 obj2.style.display =  "none";  
 obj3.style.display =  "none";  
 obj4.style.display =  "none";  
 obj5.style.display =  "none";  
 }  
 else if(aktiv == 2)  
 {  
 obj1.style.display =  "none";  
 obj2.style.display =  "";  
 obj3.style.display =  "none";  
 obj4.style.display =  "none";  
 obj5.style.display =  "none";  
 }  
 else if(aktiv == 3)  
 {  
 obj1.style.display =  "none";  
 obj2.style.display =  "none";  
 obj3.style.display =  "";  
 obj4.style.display =  "none";  
 obj5.style.display =  "none";  
 }  
 else if(aktiv == 4)  
 {  
 obj1.style.display =  "none";  
 obj2.style.display =  "none";  
 obj3.style.display =  "none";  
 obj4.style.display =  "";  
 obj5.style.display =  "none";  
 }  
 else if(aktiv == 5)  
 {  
 obj1.style.display =  "none";  
 obj2.style.display =  "none";  
 obj3.style.display =  "none";  
 obj4.style.display =  "none";  
 obj5.style.display =  "";  
 }  
}  
  
//Ab hier ist das natürlich nurnoch html die class=formular ändert nur die Farbe des buttons  
<input type="button" value="Gebäude" class="formular" OnClick="javascript:tausch(1);"><br>  
<input type="button" value="Förderung" class="formular" OnClick="javascript:tausch(2);"><br>  
<input type="button" value="Flotte" class="formular" OnClick="javascript:tausch(3);"><br>  
<input type="button" value="Produktion" class="formular" OnClick="javascript:tausch(4);"><br>  
<input type="button" value="Systeme" class="formular" OnClick="javascript:tausch(5);"><br>  
  
<div id="gebaeude">  
Gebäude  
</div>  
<div id="foerderung" style="display: none">  
Förderung  
</div>  
<div id="flotte" style="display: none">  
Flotte  
</div>  
<div id="produktion" style="display: none">  
Produktion  
</div>  
<div id="systeme" style="display: none">  
Systeme  
</div>  

OK ich hoffe ich habe an alles gedacht, wenn nicht, bitte sagen was noch fehlt, dann liefer ich es nach.
Schonmal Danke im vorraus an alle die mir Helfen!

[wahsaga]

hi,

//Hier dann der eigentliche wechsel der displays ich denke das müsste auch einfacher gehen
if(aktiv == 1)
{
obj1.style.display =  "";
obj2.style.display =  "none";
obj3.style.display =  "none";
obj4.style.display =  "none";
obj5.style.display =  "none";

Natürlich geht das einfacher - wenn du nicht mehrere "unabhängige" Variablen nimmst, sondern gleichartige Elemente auch in einer passenden Datenstruktur, einem Array, zusammenfasst.

Das kannst du dann nämlich ganz einfach in einer Schleife durchlaufen - und abhängig vom aktuellen Schleifenzähler setzt du dann jedes Element entweder auf sichtbar oder nicht sichtbar.

gruß,
wahsaga

[Eydamos]

Natürlich geht das einfacher - wenn du nicht mehrere "unabhängige" Variablen nimmst, sondern gleichartige Elemente auch in einer passenden Datenstruktur, einem Array, zusammenfasst.

Das kannst du dann nämlich ganz einfach in einer Schleife durchlaufen - und abhängig vom aktuellen Schleifenzähler setzt du dann jedes Element entweder auf sichtbar oder nicht sichtbar.

sowas in der Art habe ich mir auch schon gedacht, nur wie gesagt bin ich javascript noob, in PHP wäre das bestimmt schnell gemacht, aber ich kenne die Javascript-Befehle nicht *g* aber ich probiere was rum lass mir ...10 Minuten dann liefer ich dir nen neuen Versuch.

[Eydamos]

Ok hab ne neue Version, aber leider klappt die noch nicht ganz. Ich habe einen Syntaxfehler drin, weiß aber die korrekte Schreibweise nicht.

  
function tausch(aktiv)  
{  
 document.getElementById('nr1').style.display = 'none';  
 document.getElementById('nr2').style.display = 'none';  
 document.getElementById('nr3').style.display = 'none';  
 document.getElementById('nr4').style.display = 'none';  
 document.getElementById('nr5').style.display = 'none';  
 document.getElementById('nr'.aktiv).style.display = ''; //hier ist der Fehler  
}  
  
<input type="button" value="Gebäude" class="formular" OnClick="javascript:tausch(1);"><br>  
<input type="button" value="Förderung" class="formular" OnClick="javascript:tausch(2);"><br>  
<input type="button" value="Flotte" class="formular" OnClick="javascript:tausch(3);"><br>  
<input type="button" value="Produktion" class="formular" OnClick="javascript:tausch(4);"><br>  
<input type="button" value="Systeme" class="formular" OnClick="javascript:tausch(5);"><br>  
  
<div id="nr1">  
Gebäude  
</div>  
<div id="nr2" style="display: none">  
Förderung  
</div>  
<div id="nr3" style="display: none">  
Flotte  
</div>  
<div id="nr4" style="display: none">  
Produktion  
</div>  
<div id="nr5" style="display: none">  
Systeme  
</div>  

Besser wäre natürlich wenn ich ein Script hinbekommen würde, das ich auf mehreren Seiten nutzen kann, wo eventuell mehr oder weniger divs drin sind.

[wahsaga]

hi,

Ok hab ne neue Version, aber leider klappt die noch nicht ganz. Ich habe einen Syntaxfehler drin, weiß aber die korrekte Schreibweise nicht.

document.getElementById('nr'.aktiv).style.display = ''; //hier ist der Fehler

http://de.selfhtml.org/javascript/sprache/operatoren.htm#zeichenkettenverknuepfung

Besser wäre natürlich wenn ich ein Script hinbekommen würde, das ich auf mehreren Seiten nutzen kann, wo eventuell mehr oder weniger divs drin sind.

Das Stichwort, wenn es darum geht, irgendeinen Vorgang wiederholt, ggf. unter Verwendung veränderlicher Parameter, durchzuführen, ist immer das gleiche (und wurde auch bereits genannt) - Schleifen.

gruß,
wahsaga

[Eydamos]

So hab beim rumsuchen den richtigen Syntax gefunden. Und das ganze noch durch eine Schleife ersetzt. Da ich das gerne wie gesagt für mehrere Seiten nutzen will, wo eine unterschiedliche anzahl an divs drauf sind, würde ich die 5 gerne noch ersetzen. Durch sowas wie var anz = count(nr*) oder irgendwie sowas. Jemand nie Idee wie man das machen könnte?

  
function tausch(aktiv)  
{  
 for(var i=1; i<=5; i++)  
 {  
 document.getElementById("nr" + i).style.display='none';  
 }  
 document.getElementById('nr'.aktiv).style.display = '';  
}  
  
<input type="button" value="Gebäude" class="formular" OnClick="javascript:tausch(1);"><br>  
<input type="button" value="Förderung" class="formular" OnClick="javascript:tausch(2);"><br>  
<input type="button" value="Flotte" class="formular" OnClick="javascript:tausch(3);"><br>  
<input type="button" value="Produktion" class="formular" OnClick="javascript:tausch(4);"><br>  
<input type="button" value="Systeme" class="formular" OnClick="javascript:tausch(5);"><br>  
  
<div id="nr1">  
Gebäude  
</div>  
<div id="nr2" style="display: none">  
Förderung  
</div>  
<div id="nr3" style="display: none">  
Flotte  
</div>  
<div id="nr4" style="display: none">  
Produktion  
</div>  
<div id="nr5" style="display: none">  
Systeme  
</div>  

[Eydamos]

so nun hab ich das Problem endlich gelöst. Ich übergebe einfach die Anzahl der divs die er ändern soll an die Function.

  
function tausch(aktiv, anz)  
{  
 for(var i=1; i<=anz; i++)  
 {  
         document.getElementById("nr" + i).style.display='none';  
 }  
 document.getElementById('nr'.aktiv).style.display = '';  
}  
  
<input type="button" value="Gebäude" class="formular" OnClick="javascript:tausch(1,5);"><br>  
<input type="button" value="Förderung" class="formular" OnClick="javascript:tausch(2,5);"><br>  
<input type="button" value="Flotte" class="formular" OnClick="javascript:tausch(3,5);"><br>  
<input type="button" value="Produktion" class="formular" OnClick="javascript:tausch(4,5);"><br>  
<input type="button" value="Systeme" class="formular" OnClick="javascript:tausch(5,5);"><br>  
  
<div id="nr1">  
Gebäude  
</div>  
<div id="nr2" style="display: none">  
Förderung  
</div>  
<div id="nr3" style="display: none">  
Flotte  
</div>  
<div id="nr4" style="display: none">  
Produktion  
</div>  
<div id="nr5" style="display: none">  
Systeme  
</div>  

[Patrick Andrieu]

Hallo Eydamos!

so nun hab ich das Problem endlich gelöst. Ich übergebe einfach die Anzahl der divs die er ändern soll an die Function.

  

> OnClick="javascript:tausch(1,5);">  

            ^^^^^^^^^^^  

Event-Handler erwarten ohnehin JavaScript-Funtkionen oder -Anweisungen. "javascript:" ist hier also überflüssig (und falsche Syntax).

  
onclick="tausch(1,5);">  

Viele Grüße aus Frankfurt/Main,
Patrick

[Struppi]

Event-Handler erwarten ohnehin JavaScript-Funtkionen oder -Anweisungen. "javascript:" ist hier also überflüssig (und falsche Syntax).

Auch wenn deine Aussage stimmt, es ist aber keine flasche Syntax, sondern einfach ein überflüssiges Label (sofern der Browser JS-Label kennt, wenn nicht, stimmt deine Aussage, aber das betrifft nur alte Browser z.b. Netscape 3).

Struppi.

[Struppi]

so nun hab ich das Problem endlich gelöst. Ich übergebe einfach die Anzahl der divs die er ändern soll an die Function.

Das ist keine Lösung, da sie immer noch einen Syntaxfehler enthält und flexibler lösbar ist, um zu sagen wie, müßte man aber Wissen was du exakt vor hast, also was diese DIVs mit den durchnummerierten IDs sein sollen.

Struppi.