Umschalten Divs auf Aktualisieren

Question

Ich habe ein div am oberen Rand der Seite, Mitte und unten. Wenn ich die Seite jedes Mal aktualisiere, möchte ich, dass die oberen und unteren divs wechseln, ohne das mittlere div zu beeinflussen. Vielen Dank im Voraus für die Antworten.

My jsfiddle

Code:

.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

Es kann getan werden, sessionStorage und Klonen divs verwenden.

Was das tut, ist eine Kopie jedes Div in den Clone-Variablen und dann mit einem SessionStorage-Wert zwischen den Zuständen wechseln. Wenn der Wert sessionStorage 0 ist, wird nur der Wert geändert. Wenn er 0 ist, werden die divs entfernt und dann in der neuen Reihenfolge aus dem geklonten Inhalt hinzugefügt.

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); 
} 

Hier ist ein funktionierendes JS Fiddle Beispiel.