在内容选项卡之间切换，onclick 事件

Question

我是 js 的初学者，我的代码遇到了障碍。

我目前的进度on Codepen

我的代码：

	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 在它们之间轻松切换。我得到了使用“图像集 x”按钮更改所有（当前）图像的页面。在 Stackoverflow 上找到了代码 sn-p 并对其进行了一些修改。

我在配置脚本以允许自己获得第三组图像（以及第四组等）时遇到问题。

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 成为新的活动状态（因此第一个选项卡显示第一个容器，第二个第二个，等等）