Animierte Tabs

Übersicht

Im Gegensatz zum vorigen Beispiel, wird hier das aktuelle Tab über Javascript eingefärbt.

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 Elemente sind oben. Das Element welches angeklickt wird, wird, runtergefahren.
  2. Das Element, das unten ist, wird angeklickt. Es wird hochgefahren.
  3. Es wird auf ein Element geklickt, das nicht sichtbar ist. Das sichtbare Element wird hochgefahren, anschließend wird das welches angeklickt wurde runtergefahren.

Wenn man dieses Beispiel erweitern will, sollte jedes Blockelement, welches rauf und runtergeklappt werden soll, eine eindeutige id bekommen. Das einfachste wäre die Namensgebung beizubehalten #absatz4... etc.

Im Script werden die neuen Elemente beim Start der Seite ausgeblendet:

$("#absatz4").slideUp(0);

Ansonsten braucht man natürlich noch die Linkelemente, die das Element aufklappen. Sie bekommen den Klassename navi und ein Link auf eine Anker. Der Anker ist die id des Display Objekts welches sichtbar werden soll.

Erklärung

Das Ganze habe ich realisiert, indem es 2 Variablen gibt, eine für das aktuell runtergeklappte 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.

In Beispiel5 wurden die Links, mit CSS Pseudo Selektoren eingefärbt. Das funktioniert nur gut, wenn immer ein Element offen ist. Wenn alle Elemente zugeklappt sind, ist trotzdem das zuletzt angeklickte Link-Element das :acitve Element mit den zugewiesen CSS Eigenschaften.

In diesem Beispiel bin ich einen anderen Weg geganen. Ich habe auf die CSS Pseudoelemente verzichtet. Stattdessen setze ich die JQuery Befehle addClass() und removeClass() ein. Es gibt eine Klasse activeTab(). Diese wird bei einem Click Event von allen Klassen .navi entfernt. Das Element welches angeklickt wurde, wird über event.target ermittelt, und bekommt die CSS KLasse acitveTab mittels addClass() zugwiesen, sofern es ein Element aufklappt!

 

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();
	$('.navi').removeClass('tabActive');

	
	if(String(nextElm) == String(curElm)){
		$(curElm).slideUp(200, function(){curElm = undefined;});
	
		}else if(curElm == undefined){
			$(nextElm).slideDown( 200); curElm = nextElm;
			$(event.target).addClass('tabActive');
			}		
		else{
		$(curElm).slideUp(200, function(){$(nextElm).slideDown( 200, function(){curElm = nextElm;});});
		$(event.target).addClass('tabActive');
		}	
});		
});

zurück