tab切换

写一个小demo，主要是用原生js实现tab切换案例。

htm部份：

<div class="box">
  <div class="top">
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
  </div>
  <div class="bottom" id="bottom">
    <div style="display:block;">盒子1</div>
    <div>盒子2</div>
    <div>盒子3</div>
  </div>
</div>

css部份：

<style>
  .current{
    background:green;
    color:#fff;
  }
  .bottom div{
    width:100px;
    height:100px;
    background:red;
    display:none;
  }
</style>

js部份：

<script>
  var btns = document.getElementsByTagName('button');
  var divs = document.getElementById('bottom').getElementsByTagName('div');
  for(var i = 0;i<btns.length;i++){
    btns[i].index = i;

    btns[i].onclick = function(){
      for(var j =0;j<btns.length;j++){
        btns[j].className = '';
      }
      this.className = 'current';

      for(var i = 0;i<divs.length;i++){
        for(var j = 0;j<divs.length;j++){
          divs[j].style.display = 'none'
        }
        divs[this.index].style.display = 'block'
      }
    }
  }
</script>

转载于:https://www.cnblogs.com/rita-0204/p/9167957.html