javascript - 在内容选项卡之间切换，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 在它们之间轻松切换。我得到了使用“Image Set x”按钮更改所有(当前)图像的页面。在 Stackoverflow 上找到代码片段并对其进行了一些修改。

我在配置脚本以允许自己使用第三组图像(以及第四组等)时遇到问题。

在这种情况下 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 成为新的事件对象(因此第一个选项卡显示第一个容器，第二个选项卡显示第二个，依此类推)