Question

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

我目前的进度on Codepen

我的代码：

＆＃13;

	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;
}

＆＃13;

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

＆＃13;

我想在同一个html页面上创建多个内容集（标签），并使用js在它们之间轻松切换。我得到了一个页面，用＆＃34;图像集x＆＃34;来改变它的所有（当前）图像。纽扣。在Stackoverflow上找到了代码片段并稍微修改了它。

我无法配置脚本以允许自己获得第3组图像（以及第4组等）。

如果＆gt; else在这种情况下正常使用吗？

在我看来，该功能只允许页面内有两种不同的状态（我可能错了）

现在扩展问题和项目。

脚本在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成为新的活动（因此第一个标签显示第一个容器，第二个容器，等等。）

在内容标签之间切换，点击事件

1 个答案: