点击

Question

jquery noob here。

我的主页上有这些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; }

到目前为止，这完美无缺。

此外，我正在通过Swipebox插件以常规方式显示我的投资组合。在图库中，点击我的一个缩略图后，我想添加这个框架但是白色，如下所示：

#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-index 位;如果我在黑框上放置一个更大的 z-index ，则不会显示白色的那个，反之亦然。

我想知道默认情况下如何显示黑色的（因为它是“主要的”，位于主页面中），当点击缩略图以访问图库时，只有这样，才显示黑色的白框。

有什么想法？非常感谢：）

Answer 1

z-index只是一个指定堆栈顺序的数字，所以你想在点击时交换黑框的白框，这样我就会看看这个答案。
jQuery swap z-index on hover

Answer 2

无需添加具有不同背景颜色的其他重复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"});
  }
});