Question

我在页面顶部，中间和底部有一个div。当我每次刷新页面时，我希望顶部和底部div切换而不影响中间div。提前感谢您的任何答案。

代码：

.top {
  background: lightpink;
  padding: 40px;
}

.content {
  background: white;
}

.bottom {
  background: lightblue;
  padding: 40px;
}

<div class="top">
  1
</div>

<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam fuga impedit, obcaecati, commodi dolores quasi odit numquam esse aliquid, alias natus doloribus nihil eius dicta eaque, nobis veritatis! Praesentium, laboriosam.
</div>

<div class="bottom">
  2
</div>

Answer 1

可以使用sessionStorage和克隆div来完成。

这样做是在克隆变量中获取每个div的副本，然后使用sessionStorage值在状态之间切换。如果sessionStorage值为0，那么除了更改值之外什么都不做，如果它是1，那么它将删除div，然后从克隆内容中按新顺序添加它们。

var divOne = document.querySelector('.top');
var divTwo = document.querySelector('.bottom');
var divOneClone = document.querySelector('.top').outerHTML;
var divTwoClone = document.querySelector('.bottom').outerHTML;
var divContent = document.querySelector('.content');

if (sessionStorage.getItem('refreshState')) {

    if (sessionStorage.getItem('refreshState') == 1) {

    divOne.parentNode.removeChild(divOne);
    divTwo.parentNode.removeChild(divTwo);
    divContent.insertAdjacentHTML('beforebegin', divTwoClone);
    divContent.insertAdjacentHTML('afterend', divOneClone);
    sessionStorage.setItem('refreshState', 0);

  } else {

    sessionStorage.setItem('refreshState', 1);

  }

} else {
    sessionStorage.setItem('refreshState', 0);
}

这是一个有效的JS Fiddle示例。

在刷新时切换Div

1 个答案: