Übersicht

Der Unterschied zum vorigen Beispiel sind neue CSS Eigenschaften hinzugekommen.

Hier wird über einen Anker ein Objekt angesprochen, auf dass eine Aktion angewendet wird. Hier wird es etwas komplizierter, da hier auf 3 Möglichkeiten eingegangen wird.

  1. Alle Fenster sind oben. Der Tab öffnet das dazugehörige Fenster. Der Tab ist aktiv.
  2. Der Tab für das Fenster, welches sichtbar ist, wird angeklickt. Das Fenster wird hochgefahren. Alle Tabs sind deaktiviert.
  3. Es wird auf ein Tab geklickt, für ein Fenster welches nicht sichtbar ist. Das sichtbare Fenster wird hochgefahren, anschließend wird das ausgewählte runtergefahren.

Erklärung

In diesem Beispiel befindet sich der gleiche Javascript Code wie im vorigen Beispiel. In diesem Beispiel wurden CSS Eigenschaften hinzugefügt, die die Elemente in der Navigationsleiste mittels flex anders anordnen und den ausgewählten Tab mittels CSS Pseudoelementen einfärben.

Das Ganze habe ich realisiert, indem es 2 Variablen gibt, eine für das aktuell sichtbare Element

nextElm

Eine für das Element welches gerade aufgerufen wurde.

curElm

Wenn gar kein Element sichtbar ist, wird die Variable nextElm auf undefined gesetzt. Die anderen Werte werden als String zugewiesen: "nextElm", "curElm" Das hat folgende Vorteile

  1. Variablen sind einfach zu überprüfen,
  2. Variablen kann man als Selektor verwenden

Die Variable für das aktuell sichtbare Element bekommt ihren Wert von dem angeklickten Element nachdem es runtergefahren ist, in einer Callback Funktion.

Code 

var curElm, nextElm;

$(document).ready(function() {
	$("#absatz1").slideUp(0);
	$("#absatz2").slideUp(0);
	$("#absatz3").slideUp(0);	
	curElm = undefined;	
	
$('.navi').click(function(event) {
	nextElm = $(event.target).attr("href");
	event.preventDefault();
	if(String(nextElm) == String(curElm)){
		
		$(curElm).slideUp(200, function(){curElm = undefined});
		}else if(curElm == undefined){
			$(nextElm).slideDown( 200); curElm = nextElm;
			}		
		else{
		$(curElm).slideUp(200, function(){$(nextElm).slideDown( 200, function(){curElm = nextElm;});});
		}	
});		
});

zurück