js原生选项卡切换

 1 <div id="box">
 2   <ul id="title">
 3     <li class="active">推荐新闻</li>
 4     <li>国际新闻</li>
 5     <li>军事新闻</li>
 6     <li>娱乐新闻</li>
 7   </ul>
 8   <div class="recommend" style="display: block;">
 9     <ul>
10       <li><a href="#">各地纪念日本宣布无条件投降73周年</a></li>
11       <li><a href="#">8月16日5时56分安德烈亚诺夫群岛发生6.6级地</a></li>
12       <li><a href="#">发改委：美加征关税对华影响可控 中方反制理性克制</a></li>
13     </ul>    
14   </div>
15   <div class="international">
16     <ul>
17       <li><a href="#">亚运会-中国香港4-0完胜中国台北 韩国6-0大..</a></li>
18       <li><a href="#">瑞典百辆车被一夜点燃 首相愤怒回应：你们到底在搞什..</a></li>
19       <li><a href="#">土耳其只是开始，下一块倒下的多米诺骨牌可能是</a></li>
20     </ul>
21   </div>
22   <div class="military">
23     <ul>
24       <li><a href="#">特朗普决定搜刮120多个穷国 为何却放过这个国家？</a></li>
25       <li><a href="#">抗衡中国?法媒:美将拨3900万美元援助斯里兰卡</a></li>
26       <li><a href="#">特朗普签署2019财年美国国防授权法案</a></li>
27     </ul>
28   </div>
29   <div class="entertainment">
30     <ul>
31       <li><a href="#">昆凌荡秋千少女十足 周杰伦掌镜甜蜜还原《晴天》</a></li>
32       <li><a href="#">苍井空疑似怀孕，挂送子图提前抱宝宝体验当妈</a></li>
33       <li><a href="#">黄晓明深夜声明：未参与股票操控 是理财不慎 回顾“..</a></li>
34     </ul>
35   </div>
36 </div>

ul{
  display: flex;
}
li{
  list-style: none;
}
ul li{
  width: 150px;
  line-height: 2em;
  text-align: center;
  background:linear-gradient(#eee 37%,#666);
}
a{
  text-decoration: none;
  line-height: 2em;
  color: #111;
}
#box>div{
  width: 600px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 10px;
  display: none;
  border: 1px solid #EEEEEE;
}
/*选中样式*/
.active{
  background:linear-gradient(#666 37%,#eee);
  color: #FFFFFF;
  margin: 0;
}

var box = document.getElementById("box");
var title = box.getElementById("title");
var aLi = title.getElementsByTagName("li");
var aDiv = box.getElementsByTagName("div");
  for(var i = 0; i < aLi.length; i++){
  aLi[i].index = i;
  aLi[i].onclick = function(){
    for(var k = 0; k < aLi.length; k++){
      aLi[k].className = "";
      aDiv[k].style.display = "none";
    }
    this.className = "active";
    aDiv[this.index].style.display = "block";
  }
}