点击显示/隐藏div

Question

这里是jquery。

我把这些div作为一个框架出现在我的主页上：

#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; }

到目前为止，这是完美的。

另外，我正在通过斯威珀盒插件定期显示我的投资组合。在画廊里，点击我的一个缩略图后，我想添加这个非常画面，但是是白色的，如下所示：

#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; }

这个问题来自z索引位；如果我在黑框上放一个较大的z-索引，白色的就不会显示，相反。

我想知道，默认情况下，如何显示黑色的(因为它是“主”的，在主页面中)，当单击缩略图访问图库时，只有在那时，才能在黑色的框架上显示白色的框架。

有什么想法吗？非常感谢:)

Answer 1

没有必要添加额外的重复div与不同的背景颜色。相反，当您单击链接时，只需更改框架的颜色。

假设我对你的理解是正确的，这个https://jsfiddle.net/2wqffhnj/3/就是你想要完成的，对吗？

我只是添加了一个类

.frame-color {
    background: #000000;
}

并在单击链接时交换该颜色。

$("#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"});
  }
});

Answer 2

Z-索引只是一个指定堆栈顺序的数字，因此您希望在单击时将白色框架替换为黑色框架，这样我就可以查看这个答案。

悬停时的jQuery交换z索引