js同一个页面显示不同的内容？

html
<div class="top"><h3 class="top-t">瑞 嘉</h3></div>
<div class="cdl">
<div class="cdl-1"style="border-radius:4px 4px 0 0;" onclick="link('http://m.vorkie.com',true)">首页</div>
<div class="cdl-1">
<div class="cdl-2">门</div>
<ul class="cdl-3">
<li class="tab">实木门</li>
<li>钛合金门</li>
<li>铝合金门</li>
<li>推拉门</li>
</ul>
</div>
<div class="cdl-1" style="border-bottom: none;border-radius: 0 0 4px 4px;">
<div class="cdl-2">地板</div>
<ul class="cdl-3">
<li>复合木地板</li>
<li>实木地板</li>
<li>踢脚线</li>
</ul>
</div>
</div>
<div class="content">
<table class="con">
<tr>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>2</td>
</tr>
</table>
<table>
<tr>
<td>3</td>
</tr>
</table>
<table>
<tr>
<td>4</td>
</tr>
</table>
<table>
<tr>
<td>5</td>
</tr>
</table>
<table>
<tr>
<td>6</td>
</tr>
</table>
<table>
<tr>
<td>7</td>
</tr>
</table>
</div>
css
ul{display: flex;list-style: none;overflow:hidden;justify-content : space-around;flex-direction: row;}
li{list-style: none;margin-left: 8px;}
ul li{padding: 0;margin: 0;}
.tab{color: red;}
table{display: none;}
.con{display:block;background-color: #007AFF;}
#ktt1{display: none;}
#ktt2{display: none;}
.content{background-color: #007AFF;width: 96%;height: 200px;margin: 0 2%;}
js
var ali = document.getElementsByTagName("li");
var ata = document.getElementsByTagName("table");
for(var i=0;i<ali.length;i++){
ali[i].index=i;
ali[i].onclick = function(){
for(var j=0;j<ali.length;j++){
ali[j].className="";
ata[j].className="";
}
this.className = 'tab';
ata[this.index].className = 'con';
}
}
大神帮我看看错哪了，为什么点击不切换啊