如何在动态页面上正确切换主题?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (75)

我使用以下jQuery代码在我的网站的两个主题(白天/黑夜)之间切换。

$('#switch').on('click', function () { $('*').toggleClass('switch-bg'); });

当我单击标识为“Switch”的按钮时,工作正常,该按钮为可用的CSS属性添加/删除类“Switk-BG”(在本例中为Body属性)。

例如:

body {background: #fff;}   /* DAY mode (default) */
body.switch-bg {background: #000;}   /* NIGHT mode */

我的问题在我处于“夜间模式”时开始,并且某些内容以默认状态“白天模式”加载到页面中,这导致两者之间的混合,我希望一切保持在“夜间模式”,而该选项被选中,该怎样操作呢?

提问于
用户回答回答于

我这有一个好的解决方案:

在夜间模式下,不需要更改所有元素的类,只需要切换一个类的html。$('#switch').on('click', function () { $('html').toggleClass('nightly'); });

用户回答回答于

不要将类应用于所有元素,只需将其应用于本身,并根据上下文进行调整。

.some-element {background: #fff;}   /* DAY mode (default) */
.switch-bg .some-element {background: #000;}   /* NIGHT mode */

扫码关注云+社区

领取腾讯云代金券