很棒的js Tab选项卡切换效果

本文实例为大家分享了js Tab选项卡切换效果，供大家参考，具体内容如下

 
 
 
  *{margin:0; padding:0; list-style:none;}
  .box{
   width: 1000px;
   overflow: hidden;
   margin:100px auto 0px;
  }
  #title{
   line-height: 40px;
   background-color: rgb(247,247,247);
   font-size: 16px;
   font-weight: bold;
   color: rgb(102,102,102);
   overflow: hidden;
  }
  #title span{
   float: left;
   width: 166px;
   text-align: center;
  }
  #title span:hover{
   
   cursor: pointer;
  }
  #content{
   margin-top: 20px;
  }
  #content li{
   width: 1050px;
   overflow: hidden;
   display: none;
   background-color: rgb(247,247,247);
  }
  #content li div{
   width: 156px;
   margin-right: 14px;
   float: left;
   text-align: center;
  }
  #content li div a{
   font-size: 14px;
   color: black;
   line-height: 14px;
  
  display: inline-block;
   margin-top: 10px;
  }
  #content li a:hover{
   color: #B70606;
  }
   #content li div span{
    font-size: 16px;
    line-height: 16px;
    
    display: block;
    color: rgb(102,102,102);
    margin-top: 10px;
   }
  #content img{
   float: left;
   width: 155px;
   height: 250px;
  }
  #title .select{
   background-color: rgb(10,167,112);
   color: white;
  }
  #content .show{
   display: block;
  }
 


  
   

    帅哥
    美女
    宠物
    影视
    英雄联盟
    音乐
   
   

    

     杰森·史坦森狂拽炫酷屌炸天
     杰森·史坦森狂拽炫酷屌炸天
     汤姆·克鲁斯高端大气上档次
     汤姆·克鲁斯高端大气上档次
     卷福低调奢华有内涵
     卷福低调奢华有内涵
    
    

     美女外猛内柔女汉子
     美女外猛内柔女汉子
     美女卖萌嘟嘴剪刀手
     美女卖萌嘟嘴剪刀手
     美女时尚亮丽小清新
     美女时尚亮丽小清新
    
    

     宠物每只666块
     宠物每只666块
     宠物每只666块
     宠物每只666块
     宠物每只666块
     宠物每只666块
    
    

     哈利波特系列经典中的经典
     三傻大闹宝莱坞看到泪崩
     变形金刚系列过瘾过瘾过瘾
     千与千寻梦中的小萝莉那么清新
     龙猫我的龙猫啊啊啊
     阿甘正传阿甘还是那个阿甘
    
    

     寒冰射手蛮王他媳妇
     黑暗之女小萝莉一枚
     探险家游戏中我最帅
     人马上单大野全能
     提莫提百万每天死亡百万次。。
     狼人别给我放大
    
    

     待开发。。。
    
   
  
  

 

这段代码的关键处在最后的两个for遍历和this指针，第一个for遍历是为每一个span按钮添加点击事件，而第二个for遍历是确定当前点击的是哪个按钮，相应的内容部分就很好控制出现和隐藏了；

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