コンテンツのタブを切り替える、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でここにコードスニペットを見つけて、それに少し触れました。

自分自身が3番目の画像（4番目など）を許可するようにスクリプトを設定しています。

if> elseがこの状況で正しく使用されていますか？

は、関数が唯一の問題やプロジェクトに展開する今、（私が間違っている可能性があります）、ページ内の2つの異なる状態のため

を可能にするように私には思えます。

スクリプトはイメージのsrcを間違いなく切り替えますが、将来、ヘッダー、テキスト、およびCSSなどのWebページのより大きな部分を切り替えるタブを作成する必要がある場合は、このアイデアにアプローチして問題を解決する便利な方法は？

FrankerZはちょうどあなたがはるかに最も簡単な解決策になります切り替えることができますのdivのセットを作成し、示唆したようにすべてのヘルプは

Answer 1

を高く評価しています。ここでは簡単な例である。これにより

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は基本的にただ要素のそれぞれを通ります。クリックすると、現在のタブが非表示になり、並列の#container>divが新しいアクティブになります（最初のタブは最初のコンテナを示し、2番目のコンテナなど）