在页面之间切换时保持按钮处于活动状态

Question

我正在为一个学校项目制作多页寻呼机，到现在为止一切都进行得很顺利，但是有一件事我不知道， 我有一个小的Java脚本，当单击切换按钮时，它会在2个CSS文件之间切换，一个CSS``页面是另一个CSS页面的暗模式。 因此该按钮有效，但是每次我从页面切换到另一页面时，按钮都会重置，例如，如果我在主页上打开了暗模式，然后转到图库页面，例如暗模式重置并重新启动，我想知道是否有人知道我必须添加到Java脚本中才能使其正常工作。 预先感谢。

document.getElementById('myonoffswitch').onclick = function() {
    console.log('123')
    if (document.getElementById('myonoffswitch').checked) {
      document.getElementById('theme').href = "../css/dark.css";
    } else {
      document.getElementById('theme').href = "../css/style.css";
    };

ul {
  margin: 0;
  text-align: center;
}

li {
  float: right;
  display: block;
  height: 45px;
  padding-top: 10px;
  padding-right: 10px;
  text-decoration: none;
}

a {
  text-decoration: none;
  color: rgb(255, 255, 255);
  font-size: 23px;
  text-align: center;
}

.hover {
  display: inline-block;
  position: relative;
}

.hover::before {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: rgb(255, 255, 255);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.header {
  position: absolute;
  width: 98%;
  top: 10px;
  left: 0;
  margin-left: 1%;
}

footer {
  background-image: radial-gradient(#000000, #535252);
  border-radius: 10px 10px 10px 10px;
  padding: 10px;
  background-color: rgb(255, 255, 255);
  text-align: center;
  color: rgb(255, 255, 255);
  border-radius: 10px 10px 10px 10px;
  box-shadow: rgb(0, 0, 0) 2px 2px 2px;
  margin-top: auto;
}

center {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  background-color: rgb(51, 51, 51);
}

.onoffswitch {
  position: relative;
  width: 90px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.onoffswitch-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #FFFFFF;
  border-radius: 20px;
}

.onoffswitch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before,
.onoffswitch-inner:after {
  display: block;
  float: left;
  width: 50%;
  height: 30px;
  padding: 0;
  line-height: 30px;
  font-size: 14px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.onoffswitch-inner:before {
  content: "ON";
  padding-left: 10px;
  background-color: #000000;
  color: #FFFFFF;
}

.onoffswitch-inner:after {
  content: "OFF";
  padding-right: 10px;
  background-color: #EEEEEE;
  color: #999999;
  text-align: right;
}

.onoffswitch-switch {
  display: block;
  width: 18px;
  margin: 6px;
  background: #000000;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 56px;
  border: 2px solid #FFFFFF;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
  right: 0px;
}

.box {
  background-color: rgb(0, 0, 0);
  width: 800px;
  border: 5px solid rgb(211, 211, 211);
  padding: 50px;
  margin: 20px;
  color: white;
  font-size: 10px;
  height: 452px;
  word-spacing: 5px;
}

.headline {
  color: white;
  font-size: 30px;
}

.moviecenter {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}

.resp-iframe {
  position: absolute;
  top: 180px;
  left: 1100px;
  width: 912px;
  height: 561px;
  border: 0;
}

#content {
  padding: 10px;
  font-family: abel;
  background-color: rgb(51, 51, 51);
  margin-left: 10px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  color: #ffffff8a;
  font-size: 20px;
  box-shadow: inset 0px 1px 7px 0px #8585858a;
  text-align: center;
}

#imageTable {
  margin: auto;
  margin-bottom: 10px;
}

.gallery {
  margin: 5px;
  border: 5px solid #000000;
  width: 1000px;
}

#container {
  margin-top: 15px;
  padding: 10px;
}

.desc {
  padding: 25px;
  text-align: center;
}

.gallery:hover {
  border: 5px solid rgb(255, 255, 255);
}

.gallery img {
  width: 100%;
  height: auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="description" content="openings pagina van onze portofilio website" />
  <meta name="keywords" content="portofilio, animatie, beeld, geluid, video, internettechnieken, scripten, grafische, vormgeving" />
  <meta name="author" content="Liam De Herdt" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Home</title>
  <link rel="icon" type="image/x-icon" href="../images/heylen.ico">
  <link rel="stylesheet" href="../css/style.css" id="theme">
  <link href="../css/lightbox.css" rel="stylesheet" type="text/css">
  <script src="../js/jquery-1.11.0.min.js"></script>
  <script src="../js/lightbox.js"></script>


</head>

<body>

  <div class="headline">
    <h1 style="font-family: 'Spray.ME'; font-weight: normal; font-style: normal;">S.I.T Secure Inmates Transport</h1>
  </div>

  <nav class="header">
    <ul>
      <li class="hover"><a href="../Home/index.html">Home</a></li>
      <li class="hover"><a href="../Info/info.html">Info</a></li>
      <li class="hover"><a href="../Gallery/gallery.html">Gallery</a></li>
      <li class="hover"><a href="../Story/story.html">Story</a></li>
      <li class="hover"><a href="../Contact/contact.html">Contact</a></li>

    </ul>
  </nav>



  <div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0">
    <label class="onoffswitch-label" for="myonoffswitch">

      <span class="onoffswitch-inner"></span>
      <span class="onoffswitch-switch"></span>

    </label>
  </div>



  <script src="../js/dark.js"></script>

  <div class="box">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a vulputate orci, non posuere metus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis scelerisque nibh massa. Sed tempus
      nunc libero, sed dictum tortor facilisis et. Donec dictum, dolor et tristique scelerisque, enim justo vestibulum eros, sed fringilla purus purus non mauris. Nulla vitae neque tortor. Nullam scelerisque faucibus commodo. Donec tincidunt elementum
      nibh ac laoreet. Pellentesque velit odio, eleifend et eros sed, faucibus gravida lorem. Donec vulputate dui ut nibh dictum, ut egestas ante mollis. Suspendisse suscipit tellus urna, id posuere nunc lobortis vel. Pellentesque maximus fringilla augue,
      in tincidunt orci vulputate in. Cras ut dapibus augue, sit amet convallis enim. Donec sollicitudin enim lacinia, bibendum felis vitae, efficitur nisl. Sed scelerisque tellus orci, quis commodo dolor elementum eget. Vestibulum blandit lobortis nisi,
      et hendrerit ipsum tincidunt quis. Ut dapibus mi facilisis est tristique suscipit. Suspendisse suscipit tellus urna, id posuere nunc lobortis vel. Pellentesque maximus fringilla augue, in tincidunt orci vulputate in. Cras ut dapibus augue, sit amet
      convallis enim. Donec sollicitudin enim lacinia, bibendum felis vitae, efficitur nisl. Sed scelerisque tellus orci, quis commodo dolor elementum eget. Vestibulum blandit lobortis nisi, et hendrerit ipsum tincidunt quis. Ut dapibus mi facilisis est
      tristique suscipit.Suspendisse suscipit tellus urna, id posuere nunc lobortis vel. Pellentesque maximus fringilla augue, in tincidunt
    </h1>

  </div>

  <div id="moviecenter">
    <iframe class="resp-iframe" src="https://www.youtube.com/embed/8LfWdV944kU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>



  <div id="container">
    <div id="content">
      <br>
      <table id="imageTable">
        <tr>
          <td class="gallery">
            <a target="_blank" href="../images/Liam_Digitale_fotomontage_definite.jpg" data-lightbox="goeienavond">
              <img src="../images/Liam_Digitale_fotomontage_definite.jpg" alt="textImg" width="400" height="600">
            </a>
            <div class="desc">Digitale Foto Montage</div>
          </td>

        </tr>
        <tr>
          <td class="gallery">
            <a target="_blank" href="../images/technisch_plan_Liam.jpg" data-lightbox="goeienavond">
              <img src="../images/technisch_plan_Liam.jpg" alt="textImg" width="400" height="600">
            </a>
            <div class="desc">Technisch Plan</div>
          </td>
        </tr>
      </table>
    </div>
  </div>







  </tr>
  </table>
  </div>
  </div>





  <footer>
    <p class="pfooter">&copy; Liam De Herdt 2020 </p>
  </footer>


</body>

</html>

Answer 1

那javascript的本地存储呢？您可以在一页中设置一个值，然后在下一页中检索。这可能是您在下面看到的，也可能是按钮的状态以字符串表示。然后，您可以使用此字符串将按钮的样式设置为启用或禁用。

Local Storage

// Store enabled value
localStorage.setItem("myButtonState", "enabled");
// Or, Store disabled value
// localStorage.setItem("myButtonState", "disabled");
    
// Retrieve value
var myButtonState = localStorage.getItem("myButtonState");

// Check value if enabled
if(myButtonState == "enabled") {
  document.getElementById("myButtonState").disabled = false;
}

// Check value if disabled
if(myButtonState == "disabled") {
  document.getElementById("myButtonState").disabled = true;
}

<button type="button" id="myButton" disabled="">Button1</button>