我使用下面的jQuery代码在我的网站的两个主题(白天/晚上)之间切换。
$('#switch').on('click', function () { $('*').toggleClass('switch-bg'); });
当我单击标识为"switch“的按钮时,一切都会正常工作,该按钮将为可用的CSS属性(在本例中为body属性)添加/删除类"switch-bg”。
示例:
body {background: #fff;} /* DAY mode (default) */
body.switch-bg {background: #000;} /* NIGHT mode */
我的问题开始于当我处于“夜间模式”时,一些内容以默认的状态“白天模式”加载到页面中,这导致了两者的混合。
更多详细信息:
当这个选项被选中时,我希望所有的东西都保持在“夜间模式”。
发布于 2018-07-23 07:09:44
你的问题的一个好的解决方案是:
html
中切换一个类。在本例中,为nightly。基于其自己的类对元素进行主题化的$('#switch').on('click', function () { $('html').toggleClass('nightly'); });
html
。.button {背景色:#fff;//白天模式} .nightly .button {背景色:#000;//夜间模式}
发布于 2018-07-23 07:04:02
使用localStorage保存用户的首选项。每次加载新内容时读取位置存储条目,并根据保存的选项设置类。
发布于 2018-07-23 07:07:51
不要将类应用于所有(*)。只需将其应用于正文,并根据上下文设置样式即可。
例如:
.some-element {background: #fff;} /* DAY mode (default) */
.switch-bg .some-element {background: #000;} /* NIGHT mode */
https://stackoverflow.com/questions/51469893
复制相似问题