SteGaSoft, Stephan Gärtner - Tab-Box mit JavaScript und CSS

Für eines meiner Plugin-Projekte benötigte ich eine einfache Tab-Box mit Eingabe-Funktion. Auf der Suche im Internet bin ich zwar auf eine Reihe von Tab-Menüs gestoßen, habe aber für mich nicht das richtige gefunden. Also, selber ran ans Werk.

Falls Sie auch auf der Suche nach einer Tab-Box sind und damit Sie es vielleicht etwas einfacher haben, zeige ich hier meine Vorgehensweise.

Zuerst werden die nötigen CSS-Styles für die Box erstellt. Das sind zunächst die Angaben für die Box selbst. Da ich eine Box mit Eingabemöglichkeit benötigte, war diese in meinem Fall ein Formular-Element.

#tab_box {
  width: 400px;
  margin:0;
  font-family:Verdana;
}

Dann die Formatierung für die Reiter (Tabs) für “inaktiv” und “aktiv”:

.tab {
  background-color:#8F8F8F;
  color:#EFEFEF;
  border:solid 1px #000000;
  width:60px;
  height:15px;
  font-size:8pt;
  text-align:center;
  padding:3px;
  margin:0;
  float:left;
}
 
 
.tab_aktiv {
  background-color:#CFCFCF;
  color:#1F1F1F;
  border:solid 1px #000000;
  border-bottom:solid 0px #000000;
  width:60px;
  height:15px;
  font-size:8pt;
  text-align:center;
  padding:3px;
  margin:0;
  float:left;
}

Um die Reiter etwas voneinander zu trennen, wird noch ein Spacer benötigt:

.tab_spacer {
  background-color:#ffffff;
  border-bottom:solid 1px #000000;
  width:5px;
  height:22px;
  margin:0;
  float:left;
}

Zum Schluss noch die Format-Angaben für die Kontent-Boxen:

 .tab_content {
  width:400px;
  height:300px;
  border:solid 1px #000000;
  border-top:0px;
  font-family:Verdana;
  visibility:visible;
  font-size:10pt;
}
 
.tab_content_inaktiv {
  width:0px;
  height:0px;
  border:solid 0px;
  visibility:hidden;
  display:none;
}

Außerdem ist noch etwas JavaScript notwendig:

var tab_arr = new Array("tab1","tab2");
function switch_tab (obj) {
  var content_elem;
  obj.className="tab_aktiv";
  content_elem = obj.id + "_content";
  document.getElementById(content_elem).className="tab_content";
 
 
  for(var i=0; i<tab_arr.length; i++) {
     if(tab_arr[i] == obj.id)
       continue;
     else {
       document.getElementById(tab_arr[i]).className="tab";
       content_elem = tab_arr[i] + "_content";
       document.getElementById(content_elem).className="tab_content_inaktiv";
 
     }
  }
 
}

Die Variable “tab_arr” muss je nach Anzahl der Reiter natürlich noch entsprechend erweitert werden.

Im Body wird das ganze dann nun zusammengebaut:

<form action="tabtest.php" method="POST" target="_blank" id="tab_box" name="tab_box">
 <div id="tab1" class="tab_aktiv" onclick="switch_tab (this)">Seite 1</div><div class="tab_spacer"></div><div id="tab2" class="tab" onclick="switch_tab (this)">Seite 2</div><div class="tab_spacer" style="width:259px;"></div>
 <textarea id="tab1_content" name="tab1_content" class="tab_content">Inhalt 1</textarea>
 <textarea id="tab2_content" name="tab2_content" class="tab_content_inaktiv">Inhalt 2</textarea>
<input type="Submit" name="sbtn" value="OK">
</form>

Em Ende sollte dann eine Tab-Box wie hier im Beispiel auf der Seite sichtbar sein.

Über die Style-Eigenschaften kann die Box beliebig angepasst werden. Wenn Sie nur Kontent anzeigen wollen, können statt des Formulars und / oder der Textareas auch DIV-Elemente verwendet werden.

Tab-Box mit JavaScript und CSS

Ein Kommentar

Hinterlasse eine Antwort Antworten abbrechen

Aktuelles

Kategorien

Archiv

Lesezeichen