选项卡解说：
      
  1、支持一个页面多次引用；
      
  2、一次引用实现多次切换；
      
  3、点击/滑过等切换方式自定义；
      
  4、自动播放+鼠标动作切换；
      
  5、自动播放时鼠标移向内容区域暂停播放；
      
  6、切换完成后回调函数。
      
      
    
      函数引用说明：
      
  slide({handle:elems, content:elems, current:"current", mode:"click", delay:5000, fn:function(){...} });
      
      
  引用基本格式 slide({...}); 中间的“...”所代表的就是参数内容。
      
      
  参数说明：
      
  handle：表示选项卡分组名称的节点数组
      
  content：表示与分组名称对应的内容的节点数组
      
  current：表示当前分组名称的样式名称
      
  mode：表示切换方式，支持“click/mouseover/...”等鼠标事件
      
  delay：表示自动播放的间隔时间，有值则自动播放，单位毫秒
      
  fn：表示切换完成一次后的回调函数
     
     
  
      引用示例一：  
      
  // 鼠标滑过显示  一次引用，实现多个切换
  var slides = ["tab01", "tab02"];
  for(var i=0; i<slides.length; i++){
    var elemTit = document.getElementById(slides[i]).getElementsByTagName("h2")[0].getElementsByTagName("span");
    var elemCon = document.getElementById(slides[i]).getElementsByTagName("ul");
    slide({ handle:elemTit, content:elemCon, current:"current", mode:"mouseover" });
}
     
     
  
      
    标题0    标题1    标题2    标题3  
  
      
       滑过显示0
      
  
      
       滑过显示1
      
  
      
       滑过显示2
      
  
      
       滑过显示3
      
     
     
  
      
    标题0    标题1    标题2    标题3  
  
      
       滑过显示0
      
  
      
       滑过显示1
      
  
      
       滑过显示2
      
  
      
       滑过显示3
      
     
     
  
      引用示例二：  
      
// 鼠标点击显示
  slide({ handle:document.getElementById("tab03").getElementsByTagName("h2")[0].getElementsByTagName("a"), content:document.getElementById("tab03").getElementsByTagName("ul"), current:"current", mode:"click" });
     
     
  
      
    标题0    标题1    标题2    标题3  
  
      
       点击显示0
      
  
      
       点击显示1
      
  
      
       点击显示2
      
  
      
       点击显示3
      
     
     
  
      引用示例三：  
      
// 自动播放
slide({
  handle:document.getElementById("tab04").getElementsByTagName("h2")[0].getElementsByTagName("a"),
  content:document.getElementById("tab04").getElementsByTagName("ul"),
  current:"current",
  mode:"mouseover",
  speed:1000
});
     
     
  
      
    标题0    标题1    标题2    标题3  
  
      
       自动播放0
      
  
      
       自动播放1
      
  
      
       自动播放2
      
  
      
       自动播放3
      
     
     
        完整示例下载： 
      完整版下载TAB.rar 
      完整JS下载tab.full.rar 
      压缩JS下载tab.min.rar  
      
      
  项目主页：
      http://www.imf7.com/code/tab/
      
  博客介绍：
      http://www.imf7.com/archives/154
     

 

 

 

 

 

 

 

 

 

 

     
     
    
      
       
最新更新
       
VIP小说
       
新书更新
      
    
      
    
      
        
       
        
       
        
       
        
       
        
       
        猎卡 第二卷 刺客联盟　第四十四章 烧钱之举 白斩堂04-15 22:51