Swap-DIV-Container ohne Neuladen der Seite

Question

Ich habe einen großen Div-Container (ID = erster Container). In diesem Container befinden sich vier kleinere Divs. Ursprünglich sind in diesen vier blauen DIVs Bilder enthalten.

Ich habe auch zwei andere Divs außerhalb Container. Ihr Zweck besteht darin, den gesamten ersten Container in einen anderen Container zu tauschen. Es wird drei Container mit drei verschiedenen IDs geben: Null-Container, Erster-Container, Zweit-Container.

https://jsfiddle.net/chwjmrnm/

div { 
 
    outline: solid 2px red; 
 
} 
 

 
.container { 
 
    background-color: green; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.inside { 
 
    display: inline-flex; 
 
    background-color: blue; 
 
    width: 40%; 
 
    height: 40%; 
 
    margin: 8px; 
 
} 
 

 
.flip-div { 
 
    display: inline-flex; 
 
    width: 60px; 
 
    height: 40px; 
 
}

<div id="first-container" class="container"> 
 
    <div class="inside"></div> 
 
    <div class="inside"></div> 
 
    <div class="inside"></div> 
 
    <div class="inside"></div> 
 
</div> 
 
    
 
    
 
<div id="next-container" class="flip-div">Previous</div> 
 
<div id="previous-container" class="flip-div">Next</div>

Das Problem ist, wie kann ich diese divs außerhalb des Behälters (iV-Container und Next-Container) zu machen, dass, wenn sie gedrückt werden, ist es die Haupt Swaps großer Container, ohne Nachladeplatz?

Ich könnte einfach previous-container div und next-container div in, senden es auf andere .html Seite und andere .html Seite würde bereits einen anderen Container haben, aber ich möchte es tun, ohne Seite neu zu laden und vorzugsweise mit einigen Folie Animation.

Ich habe Probleme, weil ich ziemlich neu im Codieren bin. Habe JavaScript noch nicht wirklich gelernt.

Jede Hilfe wird wirklich geschätzt, danke.

Answer 1

Sie müssen JavaScript verwenden, um mit DOM-Elementen zu interagieren. Versuchen Sie, diesen Block innerhalb des HEAD-Tags zu platzieren, damit Sie auf das Klickereignis für die Schaltflächen hören können.

<script type='text/javascript'> 
$('#next-container').on('click',function(){ 
alert('Swap to next container'); 
}); 
$('#previous-container').on('click',function(){ 
alert('Swap to previous container'); 
}); 
</script> 

Und ich empfehle Ihnen, über die 3 wichtigsten Werkzeuge zu starten Lesen Sie in Web-Entwicklung (HTML, CSS und JavaScript) verwenden werden:

1. HTML den Inhalt von Web-Seiten
zu definieren
2. das Layout der Web-Seiten angeben
3. JavaScript das Verhalten von Web-Seiten zu programmieren