Tabmenü mit DHTML

X

xtramen01

Erfahrenes Mitglied
Hallo Leute,

gibt es eine Möglichkeit mit DHTML ein Tabmenü zu gestalten welches gewisse Bereiche meiner HTML Seite unsichtbar macht und der Inhalt nur sichtbar wird wenn ich auf den Menüpunkt klicke?

Habe hier mal ein Codeschnipsel welches ich gefunden habe, aber nicht funktioniert:

HTML: 
  <table cellspacing="2" cellpadding="2" border="0" width="100%">
 <tr>
    <td id="tab1" class="offtab" onclick="dhtml.cycleTab(this.id)">1</td>
    <td id="tab2" class="offtab" onclick="dhtml.cycleTab(this.id)">2</td>
    <td id="tab3" class="offtab" onclick="dhtml.cycleTab(this.id)">3</td>
    <td width="90%" class="tabpadding">&nbsp;</td>
  </tr>
  </table> 

   <div id="page1" class="pagetext">
      <table cellspacing="2" cellpadding="2" border="0" width="100%">
 <tr><td>1</td></tr></table></div>    
 
       <div id="page2" class="pagetext">
    <table cellspacing="2" cellpadding="2" border="0" width="100%">
 <tr><td>2</td></tr></table></div>    

     <div id="page3" class="pagetext">
    <table cellspacing="2" cellpadding="2" border="0" width="100%">
 <tr><td>3</td></tr></table></div>
  
 <script language="javascript" type="text/javascript">
	dhtml.cycleTab('tab1');
</script>

Hat da jemand eine Idee wie man sowas machen kann?

Gruss
 
Moin,

ich weiss jetzt nicht, ob du mit DHTML etwas bestimmtes meinst, aber mit Javascript ist das generell natürlich möglich :)

Hier mal eine Variante:
Code: 
<style type="text/css">
<!--
.doc .pagetext{display:none}
.tab1 #page1{display:block;position:relative}
.tab2 #page2{display:block;}
.tab3 #page3{display:block;}
-->
</style>
<script type="text/javascript">
<!--
document.getElementsByTagName('html')[0].className='doc';
dhtml={cycleTab:function(t){document.getElementsByTagName('html')[0].className=t+' doc';}}
dhtml.cycleTab('tab1');
//-->
</script>

...packe den Code in den <head> deines Dokumentes...der Rest kann bleiben, wie er ist....fertsch.

Wichtig für den IE: der Browser muss sich im Standards-Mode befinden, damit dies Beispiel funktioniert.
 
Danke euch beiden.

@Abro:

Das war nur ein Beipiel von einer anderen Seite.
Klar möchte ich auf Tabellen verzichten.

Eine Tabnavigation mit css und Containern ist glaube ich nicht das Problem.

Mein Problem ist vielmehr es so hinzubekommen das auf Links verzichten kann und eben den Inhalt der momentan nicht ausgewählt ist zu verstecken und den zu zeigen der per Tab ausgewählt wurde.

Leider ist mein Englisch nicht sooo toll.

Ist das per CSS denn so überhaupt möglich wie ich mir das vorstelle?

Gruss
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück