スイッチングディベロッパーの最新情報

Question

私はページ、中央、および下部の上部にdivを持っています。私がページをリフレッシュするときは、トップとボトムのdivが中央のdivに全く影響を与えずに切り替えるようにしたい。すべての回答に事前に感謝します。

My jsfiddle

コード：

.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の例です。