如何用js写一个简易选项卡

前面的html代码部分就不贴出来了，重点在js部分;

1.首先获取到需要的DOM元素

var oLi = document.getElementById('section').getElementsByTagName('li');
var oUL=document.getElementById('detail').getElementsByTagName('ul');

2.对获取到的oLI循环遍历，添加onmouseenter事件

for(var i = 0;i<oLi.length;i++){
    oLi[i].index=i;
    oLi[i].οnmοuseenter=function(){
                   }
 }

这里为什么要写oLi[i].index=i呢？？后面会用到的；

3.在遍历了oLI添加事件后我们要对当前的li和对应的ul操作

<pre name="code" class="javascript">for(var i = 0;i<oLi.length;i++){
    oLi[i].index=i;
    oLi[i].οnmοuseenter=function(){
            this.className='current';  //为当前的li添加样式                  
            oUl[this.index].display='block';   //获取当前的li对应的index,将对应的Ul显示出来
 }

 }

4.为需要的li和ul添加操作了，不需要的呢？我们做相反的操作

for(var i=0;i<oLi.length;i++){
	       	   	  oLi[i].index=i;
	       	   	  oLi[i].οnmοuseenter=function(){
	       	   	  for(var n=0;n<oLi.length;n++){oLi[n].className='';}  //循环遍历li，置空所有li的class，写在<span style="font-family: Arial, Helvetica, sans-serif;">this.className='current'的前面否则会覆盖，下面同理；</span>
                          this.className='current';
	       	   	  
	       	   	  for(var m=0;m<oUl.length;m++){oUl[n].style.display='none';}   //循环遍历ul，隐藏所有ul
	       	   	  	oUl[this.index].style.display='block';                  <span style="font-family: Arial, Helvetica, sans-serif;"> //获取当前的li对应的index,将对应的Ul显示出来</span>
 
	       	   	  
	       	   }
	 }