如何 show/hide 在不同页面切换 div

Question

我有一些显示/隐藏不同 div 的开关。我想将开关放在我网站的选项页面上，而 div 显示/隐藏我想将它们放在不同的页面上。我在 Whosebug 用户的帮助下构建了以下代码。我做的不是很好，只是业余爱好。

例子

在选项页面上：toggle1 & toggle2 在仪表板页面上：div1 & div2

显然页面会有不同的链接

编辑：根据 unknown989 的建议，我正在尝试实现 js 代码，但我不能。我不明白我需要用什么值来代替函数中的名称和值。谁能给我一个建议？

function setSetting(name,value){
  window.localStorage.setItem(name,true);
}
function getSetting(name){
  return window.localStorage.getItem(name);
}

const div = document.querySelector("label-ck1");

if(getSetting("show")){
  div.style.display = "block";
}
else{
  div.style.display = "none";
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

/*END OF TOGGLE SWITCH*/

.hideme {
  padding:20px;
  background: blue;
  color: white;
  font-weight: 800;
  text-align: center;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<label class="switch">
  <input type="checkbox" id="ck1">
  <span class="slider round hide-off"></span>
</label>
<br><br>

<label class="switch">
   <input type="checkbox" id="ck2">
   <span class="slider round hide-off"></span>
</label>
<br><br>

<div class="hideme" id="label-ck1">Please hide me...</div>
<div class="hideme" id="label-ck2">Please hide me...</div>

Answer 1

要解决这个问题，我认为您最好的选择是将设置存储在本地存储中，然后每当您想要显示时 div 先检查设置

function setSetting(name,value){
  window.localStorage.setItem(name,value);
}
function getSetting(name){
  return window.localStorage.getItem(name);
}

如果您想显示或隐藏它

const div = document.querySelector("your_div");

if(getSetting("show")){
  div.style.display = "block";
}
else{
  div.style.display = "none";
}

如何 show/hide 在不同页面切换 div

How to show/hide toggle div in different page

html

javascript

css

function

toggle