tabs栏切换

1. 实现一个tabs栏切换效果：页面结构中tabs-item需要和切换的item有一一的对应关系。

    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }

    .tab {
      width: 978px;
      margin: 100px auto;
    }

    .tab_list {
      height: 39px;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }

    .tab_list li {
      float: left;
      height: 39px;
      line-height: 39px;
      padding: 0 20px;
      text-align: center;
      cursor: pointer;
    }

    .tab_list .current {
      background-color: #c81623;
      color: #fff;
    }

    .item_info {
      padding: 20px 0 0 20px;
    }

    .item {
      display: none;
    }

<div class="tab">
  <div class="tab_list">
    <ul>
      <li class="current">商品介绍</li>
      <li>规格与包装</li>
      <li>售后保障</li>
      <li>商品评价（50000）</li>
      <li>手机社区</li>
    </ul>
  </div>

  <div class="tab_con">

    <div class="item" style="display: block;">
      商品介绍模块内容
    </div>

    <div class="item">
      规格与包装模块内容
    </div>

    <div class="item">
      售后保障模块内容
    </div>

    <div class="item">
      商品评价（50000）模块内容
    </div>

    <div class="item">
      手机社区模块内容
    </div>
  </div>
</div>

  // 获取到所有的li
  let tab_list = document.querySelector('.tab_list').querySelectorAll('li');
  let tab_con = document.querySelector('.tab_con').querySelectorAll('.item');
  console.log(tab_list);
  console.log(tab_con);
  for (let i = 0; i < tab_list.length; i++) {
    tab_list[i].onclick = function () {
      for (let i = 0; i < tab_list.length; i++) {
        /* 将其他的class样式设置为空 */
        tab_list[i].setAttribute('class', '');
        /* 设置选项卡不显示 */
        tab_con[i].setAttribute('style', 'display:none;');
      }
      // 将点击的tab添加选中样式
      this.setAttribute('class', 'current');
      tab_con[i].setAttribute('style', 'display:block;');
    };
  }