如何在动态页面上正确切换主题？
如何在动态页面上正确切换主题？
提问于 2018-07-23 06:55:30
我使用下面的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 */我的问题开始于当我处于“夜间模式”时，一些内容以默认的状态“白天模式”加载到页面中，这导致了两者的混合。
更多详细信息：
- 通过导航菜单中的超链接将所有动态内容(外部超文本标记语言)加载到我的主页的div (内部)中。这是使用jQuery实现的。
- 仅当内容已加载时，该切换才对动态内容起作用。如果您重新加载相同或不同的内容，则会出现以下情况:加载的内容处于默认状态“白天模式”，而主页仍处于“夜间模式”。
当这个选项被选中时，我希望所有的东西都保持在“夜间模式”。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-23 07:09:44
你的问题的一个好的解决方案是：
- 不需要更改所有元素的类，只需在
html中切换一个类。在本例中，为nightly。
基于其自己的类对元素进行主题化的$('#switch').on('click', function () { $('html').toggleClass('nightly'); });
- Instead，基于父元素的类对其进行主题化。在本例中为
html。
.button {背景色：#fff；//白天模式} .nightly .button {背景色：#000；//夜间模式}
Stack Overflow用户
发布于 2018-07-23 07:04:02
使用localStorage保存用户的首选项。每次加载新内容时读取位置存储条目，并根据保存的选项设置类。
Stack Overflow用户
发布于 2018-07-23 07:07:51
不要将类应用于所有(*)。只需将其应用于正文，并根据上下文设置样式即可。
例如：
.some-element {background: #fff;} /* DAY mode (default) */
.switch-bg .some-element {background: #000;} /* NIGHT mode */页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51469893
复制相关文章
相似问题