常见6种原生js编写Tab切换（1）

第一种方法为 for循环套for循环，遍历

简单的布局：

三个切换按钮li，和三个div块。

<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul> 　　　　
<div style=background:red;></div>
<div style=background:blue;></div>
<div style=background:yellow;></div>

下边为js代码：

var o1=document.getElementsByTagName(‘li‘);
var o2=document.getElementsByTagName(‘div‘);

for(var i=0;i<4;i++) 
{
　　o1[i].onmouseover=function(){
　　　　for(var i=0;i<4;i++)
　　　　{
　　　　　　if(this==o1[i]){ 
　　　　　　o1[i].className="设置好的类" 
　　　　　　o3[i].style.display="block";
　　　　　　}else{
　　　　　　　　o1[i].className="";
　　　　　　　　o3[i].style.display="none";
　　　　　　}
　　　　}
　　}
}

这个方法非常简单，为第一个基础性东西。