Suche Vereinfachung für diesen DIV-Ein-/Ausblender

[Timo Hügel]

Hallo,

habe ein Script gefunden, das ich gerne etwas vereinfacht aufbauen möchte.

Könnte man dies in Form von einem JS vereinfachen, anhand ID und Zählnummer zB?

  
<div id="menu" class="tab_navigation">  
<a onclick="document.getElementById('nav1').style.color='#0099ff';document.getElementById('nav2').style.color='#000000';document.getElementById('show1').style.display='block';document.getElementById('show2').style.display='none';"><span id="nav1"><b>Show 1</b></span></a>  
<a onclick="document.getElementById('nav2').style.color='#0099ff';document.getElementById('nav1').style.color='#000000';document.getElementById('show2').style.display='block';document.getElementById('show1').style.display='none';"><span id="nav2"><b>Show 2</b></span></a>  
</div>  
  
<div id="show1" class="tab_container" style="display:block;z-index:100;">  
<h1>Mein Show 1</h1>  
</div>  
<div id="show2" class="tab_container" style="display:none;z-index:200;">  
<h1>Mein Show 2</h1>  
</div>  

Danke

[1UnitedPower]

Könnte man dies in Form von einem JS vereinfachen, anhand ID und Zählnummer zB?

Klar, die erste Vereinfachung besteht darin, nicht direkt in den styles der Elemente rumzufuschen, sondern eine einzige Klasse zu toggeln.

Als nächstes solltest du das Javascript aus aus den Tags entfernen und in einem eigenen script-Element unterbringen.

Dann schreibst du dir einen geeigneten Event-Handler und registrierst ihn bei den nötigen Elementen.

[Timo Hügel]

danke ... ich kenne mich leider zu wenig damit aus, ich würde keine brauchbare Lösung finden ...

habe das Beispiel gefunden, genau was ich suche, nur diese ID-gesteuerten styles gefallen mir nicht.

[T-Rex]

Mit JQuery bekommt man sowas super einfach hin.

Die Struktur sieht so aus:
<div data-fieldclicker="name"></div>
<div data-fieldslave="name"></div>

Jetzt kann man das über Jquery super einfach miteinander verbinden.

Gruß
jQuery Fan
T-Rex

[Timo Hügel]

Mit JQuery bekommt man sowas super einfach hin.

Die Struktur sieht so aus:
<div data-fieldclicker="name"></div>
<div data-fieldslave="name"></div>

Jetzt kann man das über Jquery super einfach miteinander verbinden.

Gruß
jQuery Fan
T-Rex

sorry nur Bahnhof ^^

[1UnitedPower]

sorry nur Bahnhof ^^

Wie schätzt du denn deine eigenen Kenntnisse ein? Vielleicht solltest du noch einige HTML, CSS und Javascript Tutorials abarbeiten, bevor du dich an dein erstes Projekt wagst.

[Timo Hügel]

mir wurde bereits geholfen, closed