javascript - 选项卡无法正常工作

Question

我在 JS 上创建了选项卡，但我的脚本决定拒绝工作。 我单击选项卡 - 它们不起作用，内容也没有隐藏。 Chrome 没有显示任何错误。代码应该毫无疑问地工作，但似乎有些错误。所有类(例如“隐藏”、“显示”)都是在外部 style.css 文件上创建的。 请帮忙!!

var tab;
var content;

window.onload = function() {
  content = document.querySelector('.content');
  tab = document.querySelector('.tab');
  hideTabsContent(1);
}

function hideTabsContent(a) {
  for (var i = a; i < content.length; i++) {
    content[i].classList.remove('show');
    content[i].classList.add("hide");
    tab[i].classList.remove('active');
  }
}

document.querySelector('.container').onclick = function(event) {
  var target = event.target;
  if (target.className == 'tab') {
    for (var i = 0; i < tab.length; i++) {
      if (target == tab[i]) {
        showTabsContent(i);
        break;
      }
    }
  }
}

function showTabsContent(b) {
  if (content[b].classList.contains('hide')) {
    hideTabsContent(0);
    tab[b].classList.add('active');
    content[b].classList.remove('hide');
    content[b].classList.add('show');
  }
}

.tab {
  cursor: pointer;
}
.active {
  color: white;
  background-color: green;
}
.show {
  display: block;
}
.hide {
  display: none;
}

<div class="container">
  <div class="tab active">Summer</div>
  <div class="tab">Autumn</div>
  <div class="tab">Winter</div>
  <div class="content">
    <img src="img/pic-1.jpg">
    <img src="img/pic-2.jpg">
    <img src="img/pic-3.jpg">
  </div>

  <div class="content">
    <img src="img/pic-4.jpg">
    <img src="img/pic-5.jpg">
    <img src="img/pic-6.jpg">
  </div>
  <div class="content">
    <img src="img/pic-7.jpg">
    <img src="img/pic-8.jpg">
    <img src="img/pic-9.jpg">
  </div>
</div>

Answer 1

使用 querySelectorAll 返回一个元素数组，或者仅返回第一个找到的元素。

window.onload=function() {
    content=document.querySelectorAll('.content');
    tab=document.querySelectorAll('.tab');
    hideTabsContent(1);
}