在內容標籤之間切換，onclick事件

Question

我是js的初學者，我用我的代碼遇到了障礙。

我目前的進展on Codepen

我的代碼：

\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>

我想相同的HTML頁面上創建的內容多套（標籤），並輕鬆切換他們與js。使用「Image Set x」按鈕，我可以在頁面上更改所有（當前）圖像。在Stackoverflow上找到這裏的代碼片段並修改了一下。

我無法配置腳本來允許我自己第三組圖像（和第四等）。

Is if> else在這種情況下是否正確使用？

在我看來，該功能只允許在頁面內的2個不同國家（我可能是錯的）

我們的問題和項目拓展。

腳本在圖像的src之間切換很好，但是在將來，如果我需要製作切換大部分網頁的標籤，包括標題，文本（甚至可能是css），還有更多方便的方法來解決這個問題並解決問題？

所有幫助表示讚賞

Answer 1

至於FrankerZ提到，剛剛創建一組div的，你可以遠遠之間切換將是最簡單的解決方案。下面是一個簡單的例子：

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>

有了這個，你可以有任意數目的標籤，每個選項卡里面的內容可以是任何東西。您不必擔心內容的實際內容。

中的JavaScript基本上只經過每個#tabs>li元素，當你點擊它們，它會隱藏當前選項卡並進行並行#container>div是新的活動（所以第一個選項卡顯示的第一容器，第二第二等）