2016-06-30 22 views
0

jquery noob hier.Anzeigen/Verbergen divs auf klicken

Ich habe diese divs auf meiner Haupt-Seite als Rahmen bekommt:

#top, #bottom, #left, #right { 
    background: #000000; 
    position: fixed; 
    z-index: 99999999; 
} 
#left, #right { 
    top: 0; bottom: 0; 
    width: 0.9em; 
} 
#left { left: 0; } 
#right { right: 0; }  
#top, #bottom { 
    left: 0; right: 0; 
    height: 0.9em; 
} 
#top { top: 0; } 
#bottom { bottom: 0; } 

Bisher dies funktioniert perfekt.

Auch, ich zeige mein Portfolio, in einer regelmäßigen Weise, über das Swipebox Plugin. Im Inneren der Galerie, nach einem meiner Thumbnails klicken, möchte ich diesen sehr Rahmen hinzufügen, aber in weißer Farbe, wie folgt aus:

#top, #bottom, #left, #right { 
    background: #ffffff; 
    position: fixed; 
    z-index: 99999999; 
} 
#left, #right { 
    top: 0; bottom: 0; 
    width: 0.9em; 
} 
#left { left: 0; } 
#right { right: 0; } 
#top, #bottom { 
    left: 0; right: 0; 
    height: 0.9em; 
} 
#top { top: 0; } 
#bottom { bottom: 0; } 

Das Problem kommt mit dem z-index Bit obwohl; Wenn ich einen größeren Z-Index auf den schwarzen Rahmen lege, wird der weiße nicht angezeigt, und umgekehrt.

Ich fragte mich, wie man standardmäßig das schwarze (wie es das "Haupt" ist, das auf der Hauptseite ist) anzeigt, und wenn man auf das Miniaturbild klickt, um Zugriff auf die Galerie zu haben, und erst dann der weiße Rahmen über dem schwarzen.

Irgendwelche Gedanken? Vielen Dank :)

+3

Ich kann nicht sagen, was Sie von nur CSS bedeuten, die Sie zur Verfügung gestellt. Bitte geben Sie zusätzlichen HTML/JS-Code, den Sie verwenden, und eine funktionierende jsfiddle wäre auch sehr hilfreich. –

+0

Hallo, Sie haben Recht. Werfen Sie einen Blick auf diese Geige: https://jsfiddle.net/ormn9ajs/ Grundsätzlich, was ich versuche zu erreichen, ist nach dem Klick auf die , ändern Sie die Farbe des Rahmens von schwarz zu weiß. – Trikelians

+0

Bitte fügen Sie den gesamten Code direkt in Ihre Frage ein. Externe Ressourcen wie das von Ihnen bereitgestellte jsFiddle und Kommentare dienen ergänzenden Zwecken. Alle Informationen, die notwendig sind, um die Frage zu verstehen und beantworten zu können, müssen in die Frage selbst aufgenommen werden. –

Antwort

0

Sie müssen keine zusätzlichen doppelten Divs mit einer anderen Hintergrundfarbe hinzufügen. Ändern Sie stattdessen einfach die Farbe des Rahmens, wenn Sie auf den Link klicken.

Angenommen, ich verstehe Sie richtig, diese https://jsfiddle.net/2wqffhnj/3/ ist, was Sie zu erreichen versuchen, oder?

Ich habe einfach eine Klasse

.frame-color { 
    background: #000000; 
} 

und Swap, die Farbe, wenn Sie auf den Link klicken

$("#frame-swap").click(function() { 
    if ($(".frame-color").css("background-color") == "rgb(0, 0, 0)") { 
    $(".frame-color").css({"background":"#ffffff"}); 
    } 
    else { 
    $(".frame-color").css({"background-color":"#000000"}); 
    } 
}); 
+0

Diese Antwort ist einfach schön, genau das, was ich gesucht habe. Vielen Dank, Jd Francis! – Trikelians

+0

Um die Frage zu erweitern, tut mir leid, dass ich mich noch einmal darum kümmern muss: Wenn ich auf die ID # frame-swap klicke, öffne ich die Swipebox jquery lightbox. Wie können wir dafür sorgen, dass beim Schließen dieses Leuchtkastens der Rahmen wieder normal (schwarz) wird, anstatt wie bisher weiß zu bleiben? – Trikelians

+0

Als Option: http://jsfiddle.net/lega911/txdbsmdh/ – lega

0

Der Z-Index ist nur eine Zahl, die die Stapelreihenfolge angibt, also möchten Sie den weißen Rahmen für den schwarzen Rahmen auf klicken, so würde ich einen Blick auf diese Antwort werfen.
jQuery swap z-index on hover

Verwandte Themen