✔ Ein DIV-Container einblenden... andere ausblenden

A

Alice

Erfahrenes Mitglied
Hallo. :)

Ich habe folgenden Code um DIV-Container einzublenden und auszublenden.

Code: 
   function show_elements() {
      var elementNames = show_elements.arguments;
      for (var i=0; i < elementNames.length; i++) {
           var elementName = elementNames[i];
           document.getElementById(elementName).style.display='block';
      }
   }

   function hide_elements() {
      var elementNames = hide_elements.arguments;
      for (var i=0; i < elementNames.length; i++) {
           var elementName = elementNames[i];
           document.getElementById(elementName).style.display='none';
      }
   }

HTML: 
<a href="javascript:void(0)" title="" onclick="show_elements('ebene4');hide_elements('ebene1','ebene2','ebene3','ebene5','ebene6','ebene7','ebene8','ebene9','ebene10','ebene11','ebene12','ebene13','ebene14','ebene15','ebene16','ebene17','ebene18')"><img src="./info.png" border="0" alt="faq" /></a>

Wie man schön sehen kann, ist meine Methode mehr als unübersichtlich.

Ich möchte das ganze lieber über ein Array oder ähnliches lösen um einfach soviel Code zu sparen.

Ich hab schon einiges ausprobiert, bekomme es jedoch nicht hin.

Ich bräuchte eine Funktion die den jeweiligen DIV-Container einblendet und alle anderen ausblendet.
 
Du solltest deine Layout-Logik überdenken:
HTML: 
<div class="layers">...</div>
<!-- ... -->
<a href="javascript:void(0)" title="" onclick="toggle(3);">
  <img src="./info.png" border="0" alt="faq" />
</a>
Code: 
var toggle = function (number) {
  var layers = document.getElementsByClassName('layers');
  for(var i = 0; i < layers.length; ++i)
  {
    if(i == number)
    {
      layers[i].style.display = 'block';
    }
    else
    {
      layers[i].style.display = 'none';
    }
  }
}
 
Zuletzt bearbeitet:
Vielleicht habe ich heute nur zuviel nach Javascript Scripts gesucht, aber wie werden die einzelnen (18 Stück) DIV-Container angesprochen in deinem Beispiel?

Ich klicke also auf "toogle3" und welcher Layer öffnet sich dann?
 
Ja aber wie sehen dann die DIV-Container (Code) aus?

So?
HTML: 
<div class="layers">
   <div id="layers1">
      Bla 1
   </div>
   <div id="layers2">
      Bla 2
   </div>
   <div id="layers3">
      Bla 3
   </div>
</div>
 
Ja ok und wie muss ich die DIV-Container gestalten damit ich weiss welche angesprochen werden?
 
Übrigens ist einfach nur crack ein Tippfehler unterlaufen, denn die Methode heißt korrekterweise getElementsByClassName().
 
Zuletzt bearbeitet:
Super, jetzt ist die Verwirrung perfekt...

Warum soll denn im DIV-Container "layer 1" usw. stehen? Ich möchte verschiedene Texte einfügen.
 
Deine Frage, wie sich der HTML-Code darstellt, beantwortet eigentlich schon das Code-Beispiel von einfach nur crack :rolleyes:

HTML: 
<body>
  ...
  <div class="layers">layer 1</div>
  <div class="layers">layer 2</div>
  <div class="layers">layer 3</div>
  <!-- usw. -->
  ...
</body>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück