时间戳

首页 > 解决方案 > 在页面之间切换时保持按钮处于活动状态

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

问题描述

我正在为一个学校项目制作一个多寻呼机，到目前为止一切都进展顺利，但有一件事我想不通，我有一个小的 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>

标签： javascripthtmlbuttonswitchingmultipage

解决方案

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

本地存储

// 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>

推荐阅读