Ebenen ein und ausblenden mit js oder jquery

[sindyho0374]

Guten Morgen.

Vielleicht kann mir jeman von euch helfen. Ich möchte gerne einen Teil für meine Website so gestalten, dass ich Ebenen ein bzw. ausblenden kann. Wenn man auf den dazugehörigen Button in der Navigation drückt. Die Ebenen sollen hintereinander liegen sodass nur z.B. als Ausgangspunkt #layer1 angezeigt wird und wenn ich dann auf den nächsten Button drücke soll #layer2 angezeigt werden und #layer1 demnach verschwinden u.s.w.. Man kann es sich vorstellen wie so eine Reiternavigation. Alle Ebenen liegen in eine Hauptebene z.B. #hauptlayer

<!--Hauptlayer-->
<div id="hauptlayer">
<!--Navigation-->
<div id="navigation">
<a href="">Ebene1</a>
<a href="">Ebene2</a>
<a href="">Ebene3</a>
</div>
<!--End Navigation-->
</div>
<!--End Hauptlayer-->

Ich hoffe mir kann da jemand helfen

Vielen Dank im Voraus

LG Sindy

 

[Robbyn-]

AW: Ebenen ein und ausblenden mit js oder jquery

Mit den jquery befehlen

$('#layer1').hide();

und

$('#layer1').show();

kannst du Ebenen ein und ausblenden. Vielleicht reicht dies schon für deine Zwecke

 

[sindyho0374]

AW: Ebenen ein und ausblenden mit js oder jquery

Danke für die superschnelle Antwort.

Muss ich das dann in der jeweiligen Ebene definieren? und aber auch zusätzlich im Headbereich der Seite?

 

[Robbyn-]

AW: Ebenen ein und ausblenden mit js oder jquery

Auf die jeweiligen Button oder a href. So würde es dann aussehen:

<input type="button" onclick="javascript:hideAllElements();$('#layerID').show();" />
<a href="javascript:hideAllElements();$('#layerID').show();">Layer 1</a>

Du musst wahrscheinlich noch ein Funktion schreiben, die in meinem Fall, hideAllElements() heißt. Diese Funktion macht nichts weiteres als alle layers durchzugehen und sie auf ausblenden zu stellen.

 

[Duddle]

AW: Ebenen ein und ausblenden mit js oder jquery

Du hast schon das richtige Stichwort genannt: Reiter / Tabs. Diese Art von Navigation wird in der Regel als Tab-Menü bezeichnet und der unterliegende Code dafür ist sehr einfach.

Deshalb gibt es einige jQuery-PlugIns, die dieses Prinzip in verschiedene Richtungen anbieten. Eine Auflistung einiger davon findest du zum Beispiel hier: http://webdesignledger.com/tutorials/11-useful-jquery-tab-navigation-solutions
Alternativ musst du nur nach "jQuery Tabs Plugin" suchen.

Ob das Endergebnis dann tatsächlich wie ein Reiter-Menü aussieht kannst du meistens per CSS steuern, die Funktionalität ist im Hintergrund ja die gleiche.


Duddle

 

[sindyho0374]

AW: Ebenen ein und ausblenden mit js oder jquery

http://webdesignledger.com/tutorials/11-useful-jquery-tab-navigation-solutions
Duddle

Super! Dank. Ich denke das wird mir weiterhelfen

 

[Wellenbrecher1963]

AW: Ebenen ein und ausblenden mit js oder jquery

und innerhalb der show() funktion kannst du dann auch noch funktionen einbauen zum sliden oder bewegen. So wird die ebene oder div nicht sofort ausgeblendet, sondern sanft mit und ohne bewegung, so wie man es eben mag. auf der jquery webseite gibt es eine sehr schöne anleitung der funktionen, leider nur in englisch, so viel wie ich weiß, aber es sollte an hand der beispiele leicht durch zu arbeiten gehen.

viel erfolg
sylvio