时间戳

首页 > 解决方案 > 选项卡无法正常工作

javascript - 选项卡无法正常工作

问题描述

我在 JS 上创建了选项卡，我的脚本决定拒绝工作。我点击标签 - 它们不起作用，内容也没有隐藏。Chrome 显示没有错误。代码应该毫无疑问地工作，但它似乎是一个错误。'hide'、'show' 等所有类都是在外部 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>

标签： javascripttabs

解决方案

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

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

推荐阅读