用js实现简单的tab选项卡

tab选卡 现实网页的使用频率极高，基本上每个网页都需要使用一个或多个tab选卡

我们可以用js实现简单的tab选卡效果

代码如下：

    
    
    
    
    


    

        

            
            
导航1
            
导航2
            
导航3
        
    
    

        
内容1
   
        
内容2
  
        
内容3
   
    
    

需要注意的是：this，此时的this相当于li[i]。
li[i].index=i; 这一步必不可少，这是让li与div建立联系的关键，如果直接把div[this.index].style.display=“block”;这句代码改为div[i].style.display=“block”;将会达不到效果，这是因为i的值一直在加一，最后将会等于li.length，使得将出现 不管鼠标在哪个选项 每个div都不会显示的错误结果。

正确的效果图为：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。