<script type="text/javascript">
window.onload = function(){
var oTab = document.getElementById("tabs");
var oUl = oTab.getElementsByTagName("ul")[0];
var oLis = oUl.getElementsByTagName("li");
var oDivs= oTab.getElementsByTagName("div");
for(var i= 0,len = oLis.length;i<len;i++){
oLis[i].index = i;
oLis[i].onclick = function() {
for(var n= 0;n<len;n++){
oLis[n].className = "";
oDivs[n].className = "hide";
}
this.className = "on";
oDivs[this.index].className = "";
}
}
}
</script>
#tabs ul li{
background:#fff;
cursor:pointer;
float:left;
list-style:none;
height:28px;
line-height:28px;
margin:0px 3px;
border:1px solid #aaaaaa;
border-bottom:none;
display:inline-block;
width:60px;
text-align: center;
}
#tabs ul li.on{
border-top:2px solid saddlebrown;
border-bottom: 2px solid #fff;
}在原CSS里是对li标签设置了两次样式，第一次设置的是基本样式，这也就是你说的在class属性为空的时候为什么出现样式的原因。第二次是对class属性值为“on”的li标签设置了样式，这也就是实现切换的关键，在你点击了li标签后，他会先清除所有的li的class属性值，在为你点击的这个li标签设置一个class=on，这样就造成了只有你点击的里标签会有第二个样式。
你也可以这么理解，每一个li标签比喻成一个门，
1、先把所有门涂成红色（#tabs ul li{样式一}）；
2、为打开的门贴一个贴纸（#tabs ul li.on{样式二}）；，但是你并不知道那个门是开的。
3、这个时候，你要去检查有没有门开了（遍历li标签），先把所有门上的贴纸都拿下来（可能有也可能没有）（oLis[n].className = ""; ）然后如果你如果发现有门打开了（onclick）了，就可以对他贴一个贴纸（应用样式2了。）
你可以每次循环的时候先循环一次把所有的样式都加上，然后再根据点击消除不需要的样式，这样就解决你的问题了，保证每次只消失一个样式
for(var n= 0;n<len;n++){
oLis[n].className = "";
oDivs[n].className = "hide";
}
该句代码意思为把所有的li标签的类名设置为空，div的类名设置为隐藏
this.className = "on";
oDivs[this.index].className = "";
这两句代码意思为把当前li标签的类名设置为on，div标签的类名设置为空；
但是其他的li标签和div标签的类型都没有改变，依然是li标签的类名为空，div的类名为隐藏。
只是个人理解，希望可以帮助到你~~