原生JS实现简单页面效果

1、选项卡效果

实现思路：

1 布局三个button用于点击选项卡，3个div用于显示不同的内容
2 两层循环：
（1）外层点击切换button，添加点击效果和样式
（2）内层控制实现内容div的隐藏显示

实现过程

布局和样式如下：

#box div {
   width: 300px;
   height: 200px;
   border: 1px solid red;
   font-size: 30px;
   line-height: 200px;
   text-align: center;
   display: none;
}
.active {
   background: red;
}
<div id="box">
    <button class="active">新闻</button>
    <button>体育</button>
    <button>财经</button>
    <div style="display: block;">新闻</div>
    <div>体育</div>
    <div>财经</div>
</div>

var oBox = document.getElementById('box');
var aBtn = oBox.getElementsByTagName('button');
var aDiv = oBox.getElementsByTagName('div');
for (var i = 0; i < aBtn