Div container gegen anderen Tauschen

[molily]

Hallo,

Ich bin in JavaScript leider völlig neu ^^

Dann arbeite bitte ein JavaScript-Tutorial eigenständig durch. Leute hier können dir fertigen Code schreiben und du kannst fremden Code kopieren, aber verstehen musst du ihn letztlich selbst.

Die IF-Methode finde ich am logischsten hab aber nicht ganz verstanden, wie das dann zu notieren ist.
Ich habs deswegen erstmal mit dem Umschalten der Klasse versucht:

<script type="text/javascript">
function change(){
  document.documentElement.className = document.documentElement.className === "Theme" ? "ThemeDis" : "Theme";
}
{
  document.documentElement.className = document.documentElement.className === "Themewide" ? "ThemewideDis" : "Themewide";
}

Dieser Code ist syntaktisch fehlerhaft. Bitte lies dir einmal [ref:self812;javascript/sprache/bedingt.htm@title=Bedingte Anweisungen (if-else)] durch.

Ich schlage vor, mir einer einfachen if-else-Anweisung zu arbeiten:

[code lang=javascript]if (…) {
  …
} else {
  …
}

  
In deinem Code wird eine <http://de.selfhtml.org/javascript/sprache/bedingt.htm#entweder_oder@title=Kurzform> verwendet. Das geht ebenfalls, hat denselben Effekt, ist aber etwas kryptisch, schwer zu lesen und zu verstehen.  
  

>         #Theme {  
> 		display:block;  
> 	}  
> 	#ThemeDis {  
> 		display:none;  
> 	}  
> 	#Themewide {  
> 		display:none;  
> 	}  
> 	#ThemewideDis {  
> 		display:block;  
> 	}  
  
Anscheinend hat du die Logik des Umschaltens der Klasse noch nicht ganz verstanden. Die Idee hinter dem Umschalten der Klasse ist, dass man bei einem Elternelement eine Klasse ändert und dann eine Formatierungsregel aktiv wird, die das Nachfahrenelement betrifft. Siehe auch das [ursprüngliche Beispiel](http://forum.de.selfhtml.org/archiv/2014/1/t216394/#m1483795) von Gunnar, aus dem der Code stammt.  
  
Einfaches Beispiel:  
  
~~~html
<div id="elternelement">  
 <div id="eins">…</div>  
 <div id="zwei">…</div>  
</div>  

Standardmäßig ist #eins sichtbar und #zwei nicht:

#eins { display: block; } /* Standardeinstellung, ich hab’s einmal ausdrücklich aufgeführt */  
#zwei { display: none; }

Wenn ich jetzt die Sichtbarkeit wechseln will, füge ich per JavaScript (irgend)einem Elternelement eine Klasse hinzu. Im Beispiel dem Element mit der ID »elternelement« .

document.getElementById('elternelement').className = 'umgeschaltet';

Dann sähe das DOM so aus:

<div id="elternelement" class="umgeschaltet">  
 <div id="eins">…</div>  
 <div id="zwei">…</div>  
</div>

Jetzt kann ich CSS-Regeln schreiben, die bei gesetzter Klasse greifen. Sie können die Sichtbarkeit umkehren:

.umgeschaltet #eins { display: none; }  
.umgeschaltet #zwei { display: block; }

Siehe:
http://wiki.selfhtml.org/wiki/CSS/Selektoren/Klassenselektor
http://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Nachfahrenselektor

Welches Elternelement du zum Umschalten der Klasse wählst, ist erst einmal egal. In obigem Beispiel habe ich ein extra div-Element hinzugefügt. Man kann aber auch ein Element verwenden, das das Dokument sowieso hat, wie etwa html oder body.

In JavaScript liefert [link:https://developer.mozilla.org/de/docs/Web/API/document.documentElement@title=document.documentElement] liefert das html-Element, [link:https://developer.mozilla.org/en-US/docs/Web/API/document.body@title=document.body] liefert das body-Element. (Es geht auch anders, aber so ist es am einfachsten.)

Kombinationsbeispiel, das document.body verwendet:
http://codepen.io/molily/pen/fzxAL

Zum übergang habe ich mich mal in den Link von die eingelesen
Ich müsste da mit
transition: opacity 1s
arbeiten, hab aber nicht ganz verstanden, wie ich dann zuordne, dass das beim ein, bzw ausblenden benutzt werden soll.

Die transition-Eigenschaft wird dem Element zugeordnet, bei dem sich die angegebene Eigenschaft ändert (hier opacity).

Wenn das Ein- und Ausblenden mit display: block bzw. display: none erfolgt, dann lässt sich nicht so einfach eine CSS-Transition hinzufügen. Denn die Eigenschaft display ist nicht animierbar.

Die Eigenschaft opacity ist animierbar, allerdings nimmt ein Element mit opacity: 0 immer noch Platz ein (es hat schließlich immer noch display: block o.ä.). Ich weiß daher nicht, ob dir das weiterhilft.

Ich habe das obige Beispiel mal mit opacity anstatt display und einer Transition auf opacity gelöst:
http://codepen.io/molily/pen/hactf

Hier sollte der Unterschied klar werden. Eins und zwei liegen immer untereinander und nehmen Raum ein, selbst wenn Eins unsichtbar ist.

JavaScript-Bibliotheken wie jQuery und Zepto haben Funktionen wie fadeIn und fadeOut, die erst die opacity animieren und letztlich, wenn sie 0 erreicht hat, die display-Eigenschaft auf »none« setzen (bei fadeIn natürlich umgekehrt).

Grüße
Mathias