- 此问题在此处已有答案**:
Keep Class toggled after Page Refresh(2个答案)
2天前关闭。
html部件
<div class="language_toggle">
<div class="language_toggle_ar">
<img src="assets/images/ar.svg" class="language_toggle_ar_img">
</div>
<div class="language_toggle_en">
<img src="assets/images/en.svg" class="language_toggle_ar_img">
</div>
</div>
<div class="theme_toggle">
<div class="theme_toggle_light">
<img src="assets/images/light.png" alt="" class="theme_toggle_img">
</div>
<div class="theme_toggle_dark">
<img src="assets/images/dark.png" alt="" class="theme_toggle_img">
</div>
</div>
jquery部分
$('.theme_toggle_dark').click(function () {
$('body').attr('class', 'dark');
})
$('.theme_toggle_light').click(function () {
$('body').removeClass('dark');
})
// language toggle
if(document.dir == "ltr"){
$('.language_toggle_en').addClass("d-none");
$('.language_toggle_ar').addClass("d-flex");
}
if(document.dir == "rtl"){
$('.language_toggle_ar').addClass("d-none");
$('.language_toggle_en').addClass("d-flex");
}
$('.language_toggle_ar').click(function () {
$('html').attr('dir', 'rtl');
$('body').addClass('rtl');
$('.language_toggle_en').removeClass("d-none");
$('.language_toggle_ar').addClass("d-none");
})
$('.language_toggle_en').click(function () {
$('html').attr('dir', 'ltr');
$('body').removeClass('rtl');
$('.language_toggle_ar').removeClass("d-none");
$('.language_toggle_en').addClass("d-none");
})
// language toggle
我希望当我刷新页面,如果我添加了一个黑暗的类,黑暗的身体类将继续与身体,如果我按下删除黑暗的类,然后黑暗的类应该从身体中删除,如果有人能解决这个问题,那么请解决它。如果你能解决语言切换请解决它,但黑暗是必须的。
1条答案
按热度按时间zkure5ic1#
使用本地存储。
这将在
dark
类添加到主体时将本地存储中的darkClass
项设置为true
,并在删除dark
类时从本地存储中删除该项。在页面加载时,代码将检查本地存储中是否存在
darkClass
项,如果存在,则将dark
类重新应用于主体。