Javascript 切换一次更改2个DIV的宽度+；本地存储

函数myFunction（）{
var元素=document.getElementById（“one1”）；
element.classList.toggle（“one2”）；
var元素=document.getElementById（“two1”）；
element.classList.toggle（“two2”）；
}

#第{页边距左侧：50px；
右边距：50像素
}
#蒙布顿{浮球：右；
字体大小：25px；
宽度：50px；
高度：50px；
背景色：#f1f1；
边框：1px实心##F1F1
}
#一{
浮动：左；
宽度：40%；
高度：100px；
边框：1px纯蓝
}
.one2{
宽度：10%！重要；
高度：200px；
边框：1px纯红！重要；
}
.one2#afairedisparaitre{display:无
}
#two1{浮点：右；
宽度：59%；
高度：100px；
边框：1px纯绿
}
.two2{宽度：89%！重要
}

↔
这是DIV#one1

按钮切换到CLASS.one2

反过来
这是DIV#two1

按钮切换到CLASS.two2

反过来

当然可以。只需创建一个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());
}

---

链接到工作代码笔

使您的CSS变得更好。现在我们只需要切换一个类

。对于
#部分
，使用_toggle

它可以在这里散布错误，在代码段中，但会很好地分叉，请参阅。尝试切换它并在Codepan上重新加载页面

//检查存储是否为空
如果（localStorage.toggled！=''）{
//将类设置为#节形式存储值
document.getElementById（“section”）.classList.toggle（localStorage.toggled）；
}
函数myFunction（）{
if（localStorage.toggled！=“带切换”）{
document.getElementById（“section”）.classList.add（“带_切换”）；
localStorage.toggled=“with_toggle”；
}否则{
document.getElementById（“section”）.classList.remove（“使用_切换”）；
localStorage.toggled=“”；
}
}

#节{
左边距：50像素；
右边距：50px；
}
#蒙布顿{
浮动：对；
字体大小：25px；
宽度：50px；
高度：50px；
背景色：#f1f1；
边框：1px实心#f1f1；
}
#一{
浮动：左；
宽度：40%；
高度：100px；
边框：1px纯蓝色；
}
.带#开关#1{
宽度：10%；
边框：1px纯红；
}
.带开关，一个一个{
显示：无；
}
#二1{
浮动：对；
宽度：59%；
高度：100px；
边框：1px纯绿色；
}
.带#两个开关#1{
宽度：89%；
}

↔
这是DIV#one1
按钮切换到CLASS.one2
并反转
这是DIV#two1
按钮切换到CLASS.two2
和reverse

不错，但我的比较短，有点优化。尝试使用代码片段或代码平移，以提高答案的质量。非常感谢您的回答！！不幸的是，它不再收缩了，我可能忘记了什么。我在上面的答案中找到了答案。再次感谢，祝你万事如意：-）非常感谢你的回答！！问题是，在加载新页面时，它不会“记住”最后一个选择。因为我需要2页才能让它工作，所以我允许自己将此链接发送给您，以便您可以在这里更好地了解示例站点中的

删除

class=“with_toggle”

。您不需要在HTML中添加该类，它将仅通过脚本添加。一切都会顺利进行，只是测试而已。如果答案是有用的-不要忘记投票并检查是否被接受。将此项放在HTML

If（localStorage.toggled！=''）中的
#section
块之后，{//set class to#section form storage value document.getElementById（“section”）.classList.toggle（localStorage.toggled）}

将不会有闪烁效果。试试看，看是不是OK，我的意思不是单独的JS文件，而是HTML中的Javascript。正如我所说的，尝试将这段代码放在HTML

if（localStorage.toggled！=''）{//set class to#section form storage value document.getElementById（“section”）.classList.toggle（localStorage.toggled）；}

您可以保留单独的JS文件。只需在HTML的右边添加一些代码。对不起，我想我错把我的答案删除了。。。我想热烈地感谢你的回答。我试图实施你的建议，但它不起作用，我可能忘记了什么。。。请在这里找到一个链接，因为它需要两个页面来查看它是否保留了用户的选择，即使在加载了一个新页面之后。谢谢您的帮助