Tabs tauschen

chuvak

Erfahrenes Mitglied
Ich habe 2 Tabs: Notizen und Aufgaben. Beim Seitenstart soll automatisch der Notizen-Tab geöffnet sein, der andere geschlossen.
Dazu habe ich jeweils 2 Bilder: an.png und aus.png. Bei den Notizen ist standartmäßig der Aus-Tab unsichtbar und bei den Aufgaben ist der An-Tab unsichtbar.
Beim Klick auf einen geschlossenen Tab (aus.png) soll sich derjenige öffnen, wobei sich der andere schließt.
In meinem Beispiel werden erstmal beide An-Tabs ausgeblendet und alle Aus-Tabs und das gebrauchte Tab eingeblendet (Funktion: tauschen()).
Jedoch werden bei mir nur alle Tabs "geschlossen", also die An-Tabs ausgeblendet.

Was mache ich denn falsch?

Danke!


HTML:
<div id="notizenAus" style="position:absolute; display:none; padding-top:100px; margin-left:100px;" onclick="tauschen(notizenAn)">
<img src="/images/aus.png" class="tab" /></div>

<div id="notizenAn" style="position:absolute; margin-top:100px; margin-left:100px;">
<img src="/images/an.png" class="tab" /></div>

<div style="position:absolute; margin-top:100px; margin-left:100px;">
Notizen</div>


<div id="aufgabenAn" style="position:absolute; display:none; margin-top:100px; margin-left:200px;">
<img src="/images/an.png" class="tab" /></div>

<div id="aufgabenAus" style="position:absolute; padding-top:100px; margin-left:200px;" onclick="tauschen(aufgabenAn)">
<img src="/images/aus.png" class="tab" /></div>

<div style="position:absolute; margin-top:100px; margin-left:200px;">
Aufgaben</div>

Code:
function tauschen(tab){
document.getElementById("aufgabenAn").style.display="none";
document.getElementById("notizenAn").style.display="none";

document.getElementById("notizenAus").style.display="";
document.getElementById("aufgabenAus").style.display="";

document.getElementById(tab).style.display="";}
 
Du musst die IDs der Container, welche du der Funktion als Parameter übergibst, in Anführungszeichen setzen.

Weiterhin musst du "aufgabenAn" im Quelltext hinter "aufgabenAus" platzieren, damit es in der Schichtposition über diesem liegt und nicht davon überdeckt wird.
 

Neue Beiträge

Zurück