jstab栏切换

布局

一个容器div中分为上下两部分，上面是tab选项卡，下面是每一个选项卡对应的内容div

思路

1. 点击tab选项卡时，当前被点击的选项卡通过排他思想(先清除所有按钮的class样式，再通过添加class类名添加样式)更改选项卡的背景颜色
2. 因为选项卡和内容div的数量相同，可以通过给选项卡设置自定义属性index使每个选项卡与每个内容div一一对应，循环遍历时将变量i作为选项卡的自定义index，display隐藏所有内容div，再通过排他思想显示当前选项卡对应的内容div

HTML代码

<div id="container">
  <!-- 第一个button是有active的选中状态 -->
  <button class="active">桥本有菜</button>
  <button>三上悠亚</button>
  <button>枫花恋</button>

  <!-- 第一个div是display: block;显示，其余display: none;隐藏 -->
  <div style="display: block">桥本有菜内容</div>
  <div>三上悠亚内容</div>
  <div>枫花恋内容</div>
</div>

CSS代码

/* 容器 */
#container {
  width: 400px;
}

/* 容器中的所有button */
#container button {
  width: 100px;
  height: 40px;
  color: #ff5000;
  font-size: 16px;
}

/* 容器中的所有div */
#container div {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  /* 隐藏 */
  display: none;
}

/* 选中状态下的button */
.active {
  background: #800080;
}

JavaScript

// 获取整个容器
let box = document.querySelector('#container')
// 获取容器中的所有button
let btn = box.querySelectorAll('button')
// 获取容器中所有的div
let div = box.querySelectorAll('div')

// 为每个按钮添加点击事件
for(let i = 0; i < btn.length; i++) {
  // **每个按钮都有一个index，与显示具体内容的div的index一一对应**
  // 遍历按钮时给每个按钮添加一个自定义属性index
  // btn[i].index = i
  btn[i].setAttribute('index', i)

  btn[i].onclick = function() {
    for(let j = 0; j < btn.length; j++) {
      // 先取消所有按钮的class(排他思想)
      btn[j].className = ''
      // 先隐藏所有div(排他思想)
      div[j].style.display = 'none'
    }
    // 再单独为当前按钮添加选中class(排他思想)
    this.classList.add('active')
    // 再显示当前div(排他思想)
    // div[this.index].style.display = 'block'
    console.log('当前索引号' + this.getAttribute('index'))
    let index = this.getAttribute('index')
    div[index].style.display = 'block'
  }
}