molily: Div container gegen anderen Tauschen

Beitrag lesen

Hallo,

<script type="text/javascript">
<!--

Du brauchst Scripte nicht mehr in <!-- … //--> einbetten, sofern du nicht Browser von 1995 unterstützen willst (kein Witz, alle neueren Browser brauchen das nicht).

function change(){
d1=document.getElementById('Theme');
d2=document.getElementById('Themewide');
d2.style.display='none';
onclick("d1.style.display='none';d2.style.display='block';")

Was beabsichtigt diese Schreibweise mit onclick("…")? Das wird wahrscheinlich einen Fehler geben. Es gibt keine globale onclick-Funktion (sofern du keinen Event-Handler für window.onclick registriert hast). Wenn du den Code direkt ausführen möchtest, schreib ihn direkt hin.

d1.style.display = 'none';  
d2.style.display = 'block';

Falls du stattdessen irgendwo Event-Handler registrieren willst (onclick legt das nahe), dann schau dir einmal folgendes Tutorial an:

http://molily.de/js/event-handling-grundlagen.html
http://molily.de/js/event-handling-objekt.html
http://molily.de/js/event-handling-fortgeschritten.html

Bei Seitenaufruf soll der 2. Container (Themewide) nicht angezeigt werden und nur der erste (Theme).

Okay, das ist eine Frage von entsprechenden CSS-Regeln.

Bei Click auf "Test" soll der 2. Container eingeblendet werden und der 1. Container ausgeblendet werden.

Da geht dein Ansatz mit element.style.display = 'block' bzw. 'none' schon in die richtige Richtung.

Es gibt noch andere Methoden, die weniger JavaScript erfordern, nämlich das Umschalten einer Klasse mit JavaScript. Das Zeigen und Verstecken der Element wird dann über CSS-Regeln umgesetzt, die greifen, wenn die Klasse gesetzt ist oder nicht. Das wurde u.a. in diesem Thread diskutiert: http://forum.de.selfhtml.org/archiv/2014/1/t216394/

Bei erneutem Click auf Test soll der 2. Container wieder ausgeblendet und der 1. Container eingeblendet werden. und so weiter.

Dazu kannst du eine <http://de.selfhtml.org/javascript/sprache/bedingt.htm@title=Fallunterscheidung mit if> schreiben, die die aktuelle Sichtbarkeit abfragt und entsprechend die Element ein- und ausblendet. Logik:

Wenn Element 1 sichtbar ist
  Verstecke Element 1
  Zeige Element 2
andernfalls
  Zeige Element 1
  Verstecke Element 2

Am besten natürlich mit einem Fade-Effekt, aber das ist ja erstmal nebensache ^^

Das lässt sich am einfachsten mit einer CSS-Transition auf die opacity-Eigenschaft lösen.

Grüße
Mathias