JS基于myFocus库实现各种功能的tab选项卡切换效果

本文实例讲述了JS基于myFocus库实现各种功能的tab选项卡切换效果。分享给大家供大家参考。具体如下：

这里介绍使用myFocus-tab实现各种功能的选项卡切换，有的是带有动画效果的，各款基于myFocus库制作的焦点图风格皮肤，可自行按需选择，myFocus焦点图库及皮肤可自由使用，保留作者相关信息即可，谢谢支持！^^

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-myfocus-plug-tab-cha-nav-codes/

具体代码如下：

* { margin:0; padding:0; border:0; list-style:none; }
body { background:#fff; padding:20px; font:1em Verdana, Geneva, sans-serif; }
.box { float:left; margin-right:20px; }
.box h4 { color:#c00; line-height:30px; font-size:12px; }
.tip { border:1px solid #dedede; margin-top:20px; }
.tip p { height:30px; line-height:30px; padding-left:16px; background:#f1f1f1; }
.tip pre { background:##AFF8AB; }
.tip2 { font-size:12px; color:#888; margin-top:16px; }
.mF_tab { width:426px; height:90px; margin-left:16px; }
.mF_tab .btn { position:absolute; top:0; left:0; z-index:2; }
.mF_tab .btn li { float:left; width:80px; height:26px; line-height:26px; text-align:center; margin-right:2px; border:1px solid #dedede; border-bottom:0; cursor:pointer; background:#f1f1f1; }
.mF_tab .btn li.current { height:27px; background:#fff; }
.mF_tab .cont { position:absolute; top:27px; left:0; border:1px solid #dedede; overflow:hidden; }
.mF_tab .cont .swt { position:absolute; left:0; top:0; }
.mF_tab .cont .swt li p { padding:16px; }





 支持无限嵌套
 
 请稍候...
 
 

  
  
朋友
  
兄弟
  
亲人
  
情人
 
 

  
  

  
朋友朋友朋友
  
   请稍候...
   
   

   
   
朋友
   
兄弟
   
亲人
   
情人
   
   

   
   

    
朋友朋友朋友
    
    请稍候...
    
    

     
     
朋友
     
兄弟
     
亲人
     
情人
    
    

     
     

     
朋友朋友朋友
     
     

     
兄弟兄弟兄弟
     
     

     
亲人亲人亲人
     
     

     
情人情人情人
     
    
    
   
   

    
兄弟兄弟兄弟
   
   

    
亲人亲人亲人
   
   

    
情人情人情人
   
   
  
  
  

  
兄弟兄弟兄弟
  
  

  
亲人亲人亲人
  
  

  
情人情人情人
  
 
 


.qqTab{margin-bottom:12px;}
.qqTab .btn li { background:#A1DEFE;border-color:#36BAF0; }
.qqTab .btn li.current { height:27px; background:#F9FEFF; }
.qqTab .cont{border-color:#36BAF0; }
.qqTab .list{float:left;overflow:hidden;text-align:center;margin:16px;margin-right:0;display:inline;}
.qqTab .list ul li{list-style:circle;}
.qqTab .left{width:150px;background:#1EB2EF;}
.qqTab .middle{width:236px;background:#D4F2FD;}
.qqTab .right{width:150px;background:#CE4982;}


仿QQ今日要闻实例

 请稍候...
 
 

  
  
新闻
  
财经
  
娱乐
  
体育
 
 

  
  

  
    

     
新闻左列表
    
新闻左列表
    
新闻左列表
    
新闻左列表
   
  
  
    

     
新闻中列表
    
新闻中列表
    
新闻中列表
    
新闻中列表
   
  
  
    

     
新闻右列表
    
新闻右列表
    
新闻右列表
    
新闻右列表
   
  
  
  

  
    

     
财经左列表
    
财经左列表
    
财经左列表
    
财经左列表
   
  
  
    

     
财经中列表
    
财经中列表
    
财经中列表
    
财经中列表
   
  
  
    

     
财经右列表
    
财经右列表
    
财经右列表
    
财经右列表
   
  
  
  

  
    

     
娱乐左列表
    
娱乐左列表
    
娱乐左列表
    
娱乐左列表
   
  
  
    

     
娱乐中列表
    
娱乐中列表
    
娱乐中列表
    
娱乐中列表
   
  
  
    

     
娱乐右列表
    
娱乐右列表
    
娱乐右列表
    
娱乐右列表
   
  
  
  

  
    

     
体育左列表
    
体育左列表
    
体育左列表
    
体育左列表
   
  
  
    

     
体育中列表
    
体育中列表
    
体育中列表
    
体育中列表
   
  
  
    

     
体育右列表
    
体育右列表
    
体育右列表
    
体育右列表
   
  
  
 
 


支持高度自适应（auto）设置

 请稍候...
 
 

  
  
新闻
  
财经
  
娱乐
  
体育
 
 

  
  

  
    

     
新闻左列表
    
新闻左列表
    
新闻左列表
    
新闻左列表
   
  
  
    

     
新闻中列表
    
新闻中列表
    
新闻中列表
    
新闻中列表
    
这是测试高度自适应
    
这是测试高度自适应
    
这是测试高度自适应
    
这是测试高度自适应
   
  
  
    

     
新闻右列表
    
新闻右列表
    
新闻右列表
    
新闻右列表
   
  
  
  

  
    

     
财经左列表
    
财经左列表
    
财经左列表
    
财经左列表
   
  
  
    

     
财经中列表
    
财经中列表
    
财经中列表
    
财经中列表
   
  
  
    

     
财经右列表
    
财经右列表
    
财经右列表
    
财经右列表
   
  
  
  

  
    

     
娱乐左列表
    
娱乐左列表
    
娱乐左列表
    
娱乐左列表
   
  
  
    

     
娱乐中列表
    
娱乐中列表
    
娱乐中列表
    
娱乐中列表
   
  
  
    

     
娱乐右列表
    
娱乐右列表
    
娱乐右列表
    
娱乐右列表
   
  
  
  

  
    

     
体育左列表
    
体育左列表
    
体育左列表
    
体育左列表
   
  
  
    

     
体育中列表
    
体育中列表
    
体育中列表
    
体育中列表
   
  
  
    

     
体育右列表
    
体育右列表
    
体育右列表
    
体育右列表
   
  
  
 
 

希望本文所述对大家的Javascript程序设计有所帮助。