js写tab选项卡

js代码

var atop=document.getElementById('top');
var ali=atop.getElementsByTagName('li');
var atab=document.getElementById('tab');
var adiv=atab.getElementsByTagName('div');
for(var i=0;i<ali.length;i++){
    ali[i].index=i;
    ali[i].onclick=function(){
        for (var j=0;j<adiv.length;j++){
            adiv[j].className='new';
        }
        adiv[this.index].className='new1';
    }
}

html代码

<div id="tab">
    <ul id="top">
        <li>标题1</li>
        <li>标题2</li>
        <li>标题3</li>
    </ul>
    <div>
        <ul>
            <li><a href="#">日媒：冲绳首里城火灾基本确定起火点在正殿一层</a></li>
            <li><a href="#">宣布“搬家”后特朗普再给家乡“补刀”：人们纷纷离开是因为纽约脏乱差</a></li>
            <li><a href="#">未能完成联署 吕秀莲宣布退选2020</a></li>
            <li><a href="#">越南警方逮捕两疑犯 涉卷入英“死亡货车”案</a></li>
        </ul>
    </div>
    <div class="new">
        <ul>
            <li><a href="#">日媒：冲绳首里城火灾基本确定起火点在正殿一层1111</a></li>
            <li><a href="#">宣布“搬家”后特朗普再给家乡“补刀”：人们纷纷离开是因为纽约脏乱差1111</a></li>
            <li><a href="#">未能完成联署 吕秀莲宣布退选2020111</a></li>
            <li><a href="#">越南警方逮捕两疑犯 涉卷入英“死亡货车”案111</a></li>
        </ul>
    </div>
    <div class="new">
        <ul>
            <li><a href="#">日媒：冲绳首里城火灾基本确定起火点在正殿一层222</a></li>
            <li><a href="#">宣布“搬家”后特朗普再给家乡“补刀”：人们纷纷离开是因为纽约脏乱差222</a></li>
            <li><a href="#">未能完成联署 吕秀莲宣布退选2020222</a></li>
            <li><a href="#">越南警方逮捕两疑犯 涉卷入英“死亡货车”案222</a></li>
        </ul>
    </div>
</div>

css代码

ul{
    list-style: none;
}
a{
    text-decoration: none;
}
#tab{
    width: 600px;
    height: 190px;
    margin: 0 auto;
}
#top{
    margin-left: 20px;
}
#top li{
    display: inline-block;
    width: 60px;
    line-height: 30px;
    text-align: center;
    border:1px solid red;
    cursor: pointer;
    margin-left: 40px;
}
.tab div{
    border: 1px solid red;
}
.tab div li{
    height: 30px;
    line-height: 30px;
    text-indent: 8px;
}
.new1{
    display: block;
}
.new{
    display: none;
}