Tabreiter dynamisch generieren

[ChristianS]

Hallo zusammen!

Ich hätte da gerne mal ein Problemchen und bräuchte einen Denkanstoß zur Lösung.

Ich versuche gerade, Tabreiter, wie man sie von geordneten Oberflächen her kennt, mit HTML, CSS und Javascript nachzubilden.

<ul><li><a href="..."></li>...</ul> bilden hierbei die Reiter und werden per CSS formatiert. Die verschiedenen Seiteninhalte sind DIVs, die je nach angeklicktem Reiter eingeblendet werden.

Momentan ist die Liste mit den Reitern fest vorgegeben, die <li>s haben IDs verpaßt bekommen, damit ich sie per JS und getElementById bequem ansprechen kann.

Soweit funktioniert das ganze.

Nun soll die Liste mit Reitern aber dynamisch sein, d.h. je nach Daten können da mehr oder weniger Reiter erscheinen.

Mit IDs mache ich mir da sicherlich einen Wolf. Könnte ich einem <li> einen Namen verpassen, wäre ein Zugriff über getElementsByName sicherlich möglich und ich kann in einer Schleife über die Reiter iterieren. Leider gibt's für <li> aber kein name-Attribut.

Hat jemand einen Vorschlag für mich, wie ich das möglichst elegant und universell löse?

Danke und viele Grüße,

Christian

[Gernot Back]

Hallo ChristianS,

Mit IDs mache ich mir da sicherlich einen Wolf. Könnte ich einem <li> einen Namen verpassen, wäre ein Zugriff über getElementsByName sicherlich möglich und ich kann in einer Schleife über die Reiter iterieren. Leider gibt's für <li> aber kein name-Attribut.

Hat jemand einen Vorschlag für mich, wie ich das möglichst elegant und universell löse?

Mach es doch einfach über document.getElementById('deineListe').getElementsByTagName('LI')

Gruß Gernot

[ChristianS]

Mach es doch einfach über document.getElementById('deineListe').getElementsByTagName('LI')

Danke, Gernot. Das ist schon mal ein Stückchen.

Aber ich Heiner habe vergessen zu erwähnen, daß ich ja auch die jeweiligen DIVs (un-) sichtbar schalten muß, während ich über die Reiter iteriere.

D.h. die DIVs müssen jeweils eine eindeutige Zuordnung zu einem Reiter haben.

Ich überleg mir mal was...

[ChristianS]

So, ich mach's jetzt so:

  
function ShowBeschreibungTab(showtab_index)  
{  
  
 for (var i = 0; i < document.getElementById("auswahl_beschreibung").getElementsByTagName("LI").length; i++)  
 {  
  
  if (i == showtab_index)  
  {  
   document.getElementById("auswahl_beschreibung_" + i).style.display = 'block';  
   document.getElementById("auswahl_beschreibung").getElementsByTagName("LI")[i].className = 'TabActive';  
  }  
  else  
  {  
   document.getElementById("auswahl_beschreibung_" + i).style.display = 'none';  
   document.getElementById("auswahl_beschreibung").getElementsByTagName("LI")[i].className = 'TabInactive';  
  }  
 }  
}

Mein HTML dazu schaut so aus:

  
     <fieldset>  
      <div id="auswahl_beschreibung">  
       <ul class="tabs">  
        <li><span class="left"></span><a href="javascript: ShowBeschreibungTab(0);">Deutsch</a><span class="right"></span></li>  
        <li><span class="left"></span><a href="javascript: ShowBeschreibungTab(1);">English</a><span class="right"></span></li>  
        <li><span class="left"></span><a href="javascript: ShowBeschreibungTab(2);">Portuguesa</a><span class="right"></span></li>  
       </ul>  
      </div>  
      <legend>Description</legend>  
      <div id="auswahl_beschreibung_0">  
       <textarea id="Descriptiontext" name="textDescription_0">{textDescription} deutsch</textarea>  
      </div>  
      <div id="auswahl_beschreibung_1">  
       <textarea id="Descriptiontext" name="textDescription_1">{textDescription} english</textarea>  
      </div>  
      <div id="auswahl_beschreibung_2">  
       <textarea id="Descriptiontext" name="textDescription_2">{textDescription} portuguesa</textarea>  
      </div>  
     </fieldset>  

Ich muß die DIVs dann innerhalb des HTML-Templates aufbauen (was hier noch nicht vorbereitet ist), aber das ist das geringste Problem.

Prima, Gernot! Dein tipp hat mir schon weitergeholfen! Manchmal steht man aber auch auf dem Schlauch...

Danke & viele Grüße,

Christian