切换一次更改 2 个 DIV 宽度 + localStorage
function myFunction() {
var element = document.getElementById("one1");
element.classList.toggle("one2");
var element = document.getElementById("two1");
element.classList.toggle("two2");
}
<style>
#section{margin-left:50px;
margin-right:50px
}
#monbouton{float:right;
font-size:25px;
width:50px;
height:50px;
background-color:#F1F1F1;
border:1px solid ##F1F1F1
}
#one1{
float:left;
width:40%;
height:100px;
border:1px solid blue
}
.one2{
width:10% !important;
height:200px;
border:1px solid red !important;
}
.one2 #afairedisparaitre{display:none
}
#two1{float:right;
width:59%;
height:100px;
border:1px solid green
}
.two2{width:89% !important
}
</style>
<!DOCTYPE html>
<html>
<body>
<div id="section">
<div id="one1">
<button id="monbouton" onclick="myFunction()">↔</button>
<div id="afairedisparaitre">This is DIV #one1<br />
Button toggle to CLASS .one2<br />
and reverse</div>
</div>
<div id="two1">This is DIV #two1<br />
Button toggle to CLASS .two2<br />
and reverse</div>
</div>
</body>
</html>
我正在尝试缩小我网站的左侧，以便用户觉得更舒适时可以拥有更宽的右侧。我缺少的是一种在加载其他页面时可以在整个站点上保留选择的方法，直到用户再次单击为止。也许解决方案是在 "localStorage" 的 js 中多写几行？我真的很感激任何帮助。
尚方宝剑之说2回答
-
浮云间
让你的 CSS 更好一点。现在我们只需要.with_toggle为#section.它可以在这里，在 Snippet 中播下错误，但会在Codepan上很好地分叉，请参阅。尝试切换它并在 Codepan 上重新加载页面。// checking if our storage is not emptyif (localStorage.toggled != '') { // set class to #section form storage value document.getElementById("section").classList.toggle(localStorage.toggled);}function myFunction() { if (localStorage.toggled != "with_toggle") { document.getElementById("section").classList.add("with_toggle"); localStorage.toggled = "with_toggle"; } else { document.getElementById("section").classList.remove("with_toggle"); localStorage.toggled = ""; }}#section { margin-left: 50px; margin-right: 50px;}#monbouton { float: right; font-size: 25px; width: 50px; height: 50px; background-color: #F1F1F1; border: 1px solid #F1F1F1;}#one1 { float: left; width: 40%; height: 100px; border: 1px solid blue;}.with_toggle #one1 { width: 10%; border: 1px solid red;}.with_toggle #one1 #afairedisparaitre { display: none;}#two1 { float: right; width: 59%; height: 100px; border: 1px solid green;}.with_toggle #two1 { width: 89%;}<div id="section"> <div id="one1"> <button id="monbouton" onclick="myFunction()">↔</button> <div id="afairedisparaitre">This is DIV #one1<br /> Button toggle to CLASS .one2<br /> and reverse</div> </div> <div id="two1">This is DIV #two1<br /> Button toggle to CLASS .two2<br /> and reverse</div></div> -
MM们
当然。只需创建一个 localStorage 变量来跟踪收缩是否应该处于活动状态，并使用它在页面加载或类似的东西上应用您的样式。function shrinkActive() { var shrink; if (!(shrink = localStorage.getItem("shrink"))) { localStorage.setItem("shrink", "false"); return false; } return JSON.parse(shrink);}function setShrink(active) { var element1 = document.getElementById("one1"); var element2 = document.getElementById("two1"); if (active) { element1.classList.add("one2"); element2.classList.add("two2"); } else { element1.classList.remove("one2"); element2.classList.remove("two2"); } localStorage.setItem("shrink", active.toString());}function myFunction() { setShrink(!shrinkActive());}window.onload = function() { setShrink(shrinkActive());}链接到工作的 Codepen。https://codepen.io/bugcatcher9000/pen/pogZbrz?editors=1111
随时随地看视频慕课网APP
相关分类
JavaScript