Wechsel zwischen Registerkarten des Inhalts, onclick Ereignis

Question

Ich bin ein Anfänger bei js und ich habe in eine Straßensperre mit meinem Code gerannt.

Mein aktueller Fortschritt on Codepen

Mein Code:

\t function changeImage (element) { 
 
    var n, 
 
     imageData = [ 
 
      [ 
 
       { 
 
        src: "http://thechive.files.wordpress.com/2011/10/william-defoe.jpg", 
 
        caption: "Caption for image 1.1" 
 
       }, 
 
       { 
 
        src: "http://cdn.memegenerator.net/images/300x/159304.jpg", 
 
        caption: "Caption for image 1.2" 
 
       }, 
 
       { 
 
        src: "http://uploads.neatorama.com/images/posts/114/82/82114/1433129672-0.jpg", 
 
        caption: "Caption for image 1.3" 
 
       }, 
 

 
      ], 
 
      [ 
 
       { 
 
        src: "http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg", 
 
        caption: "Caption for image 2.1" 
 
       }, 
 
       { 
 
        src: "https://upload.wikimedia.org/wikipedia/en/7/72/Beyonce_-_Formation.png", 
 
        caption: "Caption for image 2.2" 
 
       } 
 
      ], 
 
      [ 
 
       { 
 
        src: "http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master-chief-1.jpg", 
 
        caption: "Caption for image 3.1" 
 
       }, 
 
       { 
 
        src: "http://static.guim.co.uk/sys-images/Technology/Pix/pictures/2012/3/5/1330958259135/Halo-4-007.jpg", 
 
        caption: "Caption for image 3.2" 
 
       } 
 
      ] 
 

 
     ]; 
 
    if (element > -1) { 
 
     document.getElementById('image' + element).src = imageData[element][1].src; 
 
     document.getElementById('caption' + element).innerHTML = imageData[element][1].caption; 
 
    } else { 
 
     for (n = 0; n < imageData.length; n++) { 
 
      document.getElementById('image' + n).src = imageData[n][0].src; 
 
      document.getElementById('caption' + n).innerHTML = imageData[n][0].caption; 
 
     } 
 

 
    } 
 
    return; 
 
}

<button onclick="changeImage(-1);" >Image set 1</button> 
 
<button onclick="changeImage(0); changeImage(1); changeImage(2);">Image set 2</button> 
 
    <div> 
 
     <h1 id="caption0">Caption for image 1.1</h1> 
 

 
     <img id="image0" src="http://thechive.files.wordpress.com/2011/10/william-defoe.jpg" /> 
 
    <div> 
 
     <h1 id="caption1">Caption for image 2.1</h1> 
 
     
 
     <img id="image1" src="http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg" /> 
 
    </div> 
 
    <div> 
 
     <h1 id="caption2">Caption for image 3.1</h1> 
 
     
 
     <img id="image2" src="http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master-chief-1.jpg" /> 
 
    </div>

ich mehrere Sätze erstellen möchte (Tabs) von Inhalt auf der gleichen HTML-Seite und einfach zwischen sie mit js. Ich habe die Seite bekommen, um alle (aktuellen) Bilder mit den "Image Set x" Buttons zu ändern. Hab den Code-Snippet hier auf Stackoverflow gefunden und daran ein wenig gebastelt.

Ich habe Probleme beim Konfigurieren des Skripts, um mir eine dritte Reihe von Bildern (und 4. usw.) zu erlauben.

Ist> sonst die richtige Verwendung in dieser Situation?

Mir scheint, dass die Funktion nur für zwei verschiedene Zustände innerhalb der Seite ermöglicht (Ich könnte falsch sein)

nun auf das Problem und das Projekt zu erweitern.

Das Skript wechselt zwischen src Bilder gut, aber in Zukunft, wenn ich Tabs, die einen größeren Teil der Webseite, einschließlich Header, Text (und vielleicht sogar CSS) wechseln müssen, gibt es eine mehr bequemer Weg, um diese Idee anzugehen und das Problem zu lösen?

Alle Hilfe ist willkommen

Answer 1

Wie FrankerZ angespielt, nur eine Reihe von div der Erstellung Sie zwischen wird die einfachste Lösung sein mit Abstand umschalten. Hier ist ein einfaches Beispiel:

document.querySelectorAll('#tabs>li').forEach((el, index) => 
 
    el.addEventListener('click',() => { 
 
     document.querySelector('#container>.active').classList.remove('active'); 
 
     document.querySelector(`#container>:nth-child(${index + 1})`).classList.add('active'); 
 
    }) 
 
);

#tabs li { 
 
    list-style: none; 
 
    display: inline-block; 
 
    background: #ACF; 
 
    padding: 5px 10px; 
 
    cursor: pointer; 
 
} 
 

 
#container>div { 
 
    width: 300px; 
 
    height: 200px; 
 
    padding: 10px; 
 
    border: 1px solid #000; 
 
    display: none; 
 
} 
 

 
#container>div.active { 
 
    display: block; 
 
}

<ul id="tabs"> 
 
    <li>Tab 1</li> 
 
    <li>Tab 2</li> 
 
    <li>Tab 3</li> 
 
    <li>Tab 4</li> 
 
    <li>Tab 5</li> 
 
</ul> 
 
<div id="container"> 
 
    <div class="active">Content of Tab 1</div> 
 
    <div>Content of Tab 2</div> 
 
    <div>Content of Tab 3</div> 
 
    <div>Content of Tab 4</div> 
 
    <div>Content of Tab 5</div> 
 
</div>

Mit diesem können Sie eine beliebige Anzahl von Registerkarten, und der Inhalt in jeder Registerkarte kann alles sein. Sie müssen sich nicht darum kümmern, was der Inhalt tatsächlich ist.

Das JavaScript geht im Prinzip einfach durch jedes der #tabs>li Elemente und wenn Sie auf sie klicken, wird es die aktuelle Registerkarte ausblenden und die parallele #container>div werden die neue aktive (so die erste Registerkarte zeigt den ersten Container, Sekunde die zweite usw.)