JQuery animated Tab

Übersicht

Im Gegensatz zum vorigen Beispiel ist hier ein animiertes Scrollen auf Anker hinzugefügt worden. Außerdem gibt es einige neue CSS Flex Eigenschaften die ein Responive Design ermöglichen.

Diese Beispiele habe ich programiert, weil ich kein animiertes Tab im Netz gefunden habe. Hier wird über einen Anker ein Div-Element angesprochen, auf dass eine Aktion angewendet wird. Hier wird es etwas komplizierter, da hier auf 3 Möglichkeiten eingegangen wird.

Alle Fenster sind oben. Der Tab öffnet das dazugehörige Fenster. Der Tab ist aktiv.
Der Tab für das Fenster, welches sichtbar ist, wird angeklickt. Das Fenster wird hochgefahren. Alle Tabs sind deaktiviert.
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.
Der Close Button "X" oben rechts fährt das aktuelle Fenster hoch.

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. Klasse navi und Ankerlink.
<a href="#absatz1" class="navi">Menütext</a>

Außerdem gibt es noch einen close Link, der als "X" oben rechts im Fenster erscheint. Dieses Div braucht lediglich die Klassenzuweisung close.

In diesem Beispiel ist noch eine Funktion hinzugekommen, welche ein animiertes Scrollen erzeugt, wenn man auf einen Anker-Link klickt.

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

Variablen sind einfach zu überprüfen,
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!

Die letzte Funktion erzeugt ein animiertes Scrollen durch Klicken auf einen Link, der zu einem Anker innerhalb der Seite führt. Es werden ganz normal Anker und Links erzeugt. Alles Links die mit diesem animiertem Scrollen versehen werden sollen, bekommen die Klassenzuweisung: class='scrollPage'

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');
		}	
});	

//Close X in den aufklappbaren Fenstern
$('.close').click(function(event) {	$(curElm).slideUp(200, function(){curElm = undefined;$('.navi').removeClass('tabActive');});});
	
  $('.scrollPage').click(function(event) {
   var elementClicked = $(this).attr("href");
   var destination = $(elementClicked).offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 1500 );
   event.preventDefault();
});	
	
});

1900

Die Gründerjahre

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt

nach oben

fenster

Web-Design

Feinste Website Qualität

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

nach oben

Webstuhl

Antike

Neueste Funde in Pompeji

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

nach oben

dry