日夜模式问题 [英] Night and day mode question
本文介绍了日夜模式问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
拥有以下代码，尝试根据整个网站点击的内容或刷新页面来尝试并保持夜晚或白天模式
< ;！DOCTYPE html>
< html>
< head>
< meta charset =UTF-8>
< title>日夜模式< / title>
< link rel =stylesheethref =style.csstype =text / css>
< / head>
< body>
< style>
美元{
保证金：0;
填充：0;
font-family：sans-serif;
}
部分{
position：absolute;
top：0;
左：0;
宽度：100％;
身高：100vh;
box-sizing：border-box;
填充：100px;
过渡：0.5s;
}
section.dark {
background：＃262626;
color：#fff;
}
ul {
position：absolute;
top：20px;
右：20px;
保证金：0;
填充：0;
宽度：100px;
身高：30px;
z-index：1;
border：1px solid＃000;
border-radius：4px;
cursor：pointer;
溢出：隐藏;
}
ul.active {
border-color：#fff;
}
ul li {
list-style：none;
宽度：100％;
身高：60px;
text-align：center;
text-transform：uppercase;
过渡：0.5s;
}
ul.active li {
transform：translateY（-30px）;
}
ul li span {
display：block;
宽度：100％;
身高：30px;
行高：30px;
颜色：＃262626;
背景：#fff;
}
ul li span：nth-child（1）{
background：＃262626;
color：#fff;
}
< / style>
< section>
< h1>什么是Lorem ipsum？< / h1>
< p>另一方面，我们以正义的愤慨谴责，不喜欢那些被当下快乐的魅力所迷惑和挫败的人，因为欲望蒙蔽，他们无法预见痛苦和麻烦必然会发生;同样的责任属于那些因意志的弱点而失职的人，这与通过辛劳和痛苦的萎缩是一样的。这些案件非常简单易于区分。在一个免费的时刻，当我们选择的权力不受约束，当没有什么能阻止我们能够做到我们最喜欢的事情时，每一种乐趣都会受到欢迎并避免一切痛苦。但在某些情况下，由于责任主张或商业义务，它将会经常发生的是，快乐必须被拒绝和烦恼被接受。因此，智者总是坚持这些选择的原则：他拒绝快乐以获得其他更大的乐趣，否则他忍受痛苦到避免更糟糕的痛苦。< / p>
< p>另一方面，我们以正义的愤慨谴责，不喜欢那些被当下快乐的魅力所迷惑和挫败的人，因为欲望蒙蔽，他们无法预见痛苦和麻烦必然会发生;同样的责任属于那些因意志的弱点而失职的人，这与通过辛劳和痛苦的萎缩是一样的。这些案件非常简单易于区分。在一个免费的时刻，当我们选择的权力不受约束，当没有什么能阻止我们能够做到我们最喜欢的事情时，每一种乐趣都会受到欢迎并避免一切痛苦。但在某些情况下，由于责任主张或商业义务，它将会经常发生的是，快乐必须被拒绝和烦恼被接受。因此，智者总是坚持这些选择的原则：他拒绝快乐以获得其他更大的乐趣，否则他忍受痛苦到避免更糟糕的痛苦。< / p>
< p>另一方面，我们以正义的愤慨谴责，不喜欢那些被当下快乐的魅力所迷惑和挫败的人，因为欲望蒙蔽，他们无法预见痛苦和麻烦必然会发生;同样的责任属于那些因意志的弱点而失职的人，这与通过辛劳和痛苦的萎缩是一样的。这些案件非常简单易于区分。在一个免费的时刻，当我们选择的权力不受约束，当没有什么能阻止我们能够做到我们最喜欢的事情时，每一种乐趣都会受到欢迎并避免一切痛苦。但在某些情况下，由于责任主张或商业义务，它将会经常发生的是，快乐必须被拒绝和烦恼被接受。因此，智者总是坚持这些选择的原则：他拒绝快乐以获得其他更大的乐趣，否则他忍受痛苦到避免更糟糕的痛苦。< / p>
< / section>
< ul>
< li>
< span>晚上< / span>
< span> Light< / span>
< / li>
< / ul>
< script src =https://code.jquery.com/jquery-3.3.1.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（'ul'）。click（function（）{
$（'ul'）。toggleClass（'active'）
$（'section'）。toggleClass（'dark'）
}）
}）
< / script>
< / body>
< / html>
我的尝试：
尝试玩java但是无法弄清楚要保存刷新和/或整个网站的设置取决于你提前感谢的模式
解决方案
（document）.ready（function（）{
（'ul'）。click（function（）{
（ 'UL'）。toggleClass（ '激活'）
Have the following code, trying to get it to take and stay on the night or day mode depending what is clicked for the whole site or if page is refreshed
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day And Night Mode</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
section {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
box-sizing: border-box;
padding: 100px;
transition: 0.5s;
}
section.dark {
background: #262626;
color: #fff;
}
ul {
position: absolute;
top: 20px;
right: 20px;
margin: 0;
padding: 0;
width: 100px;
height: 30px;
z-index: 1;
border: 1px solid #000;
border-radius: 4px;
cursor: pointer;
overflow: hidden;
}
ul.active {
border-color: #fff;
}
ul li {
list-style: none;
width: 100%;
height: 60px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
}
ul.active li {
transform: translateY(-30px);
}
ul li span {
display: block;
width: 100%;
height: 30px;
line-height: 30px;
color: #262626;
background: #fff;
}
ul li span:nth-child(1) {
background: #262626;
color: #fff;
}
</style>
<section>
<h1>What is Lorem ipsum ?</h1>
<p>"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."</p>
<p>"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."</p>
<p>"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."</p>
</section>
<ul>
<li>
<span>Night</span>
<span>Light</span>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul').click(function() {
$('ul').toggleClass('active')
$('section').toggleClass('dark')
})
})
</script>
</body>
</html>
What I have tried:
tried playing with the java but not able to figure it out to hold settings for refresh and or the whole site depending what mode your in thanks in advance
解决方案
(document).ready(function() {
('ul').click(function() {
('ul').toggleClass('active')
这篇关于日夜模式问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
