JavaScript TAB栏切换效果的示例

代码实现：

  
  
  
  
  
    * {
      margin: 0;
      padding: 0;
    }
    
    li {
      list-style-type: none;
    }
    
    .tab {
      width: 978px;
      margin: 100px auto;
    }
    
    .tab_list {
      height: 39px;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }
    
    .tab_list li {
      float: left;
      height: 39px;
      line-height: 39px;
      padding: 0 20px;
      text-align: center;
      cursor: pointer;
    }
    
    .tab_list .current {
      background-color: #c81623;
      color: #fff;
    }
    
    .item_info {
      padding: 20px 0 0 20px;
    }
    
    .item {
      display: none;
    }
  



  
    
      

 
商品介绍
 
规格与包装
 
售后保障
 
商品评价（50000）
 
手机社区
      
    
    
      
 商品介绍模块内容
      
      
 规格与包装模块内容
      
      
 售后保障模块内容
      
      
 商品评价（50000）模块内容
      
      
 手机社区模块内容
      

    
  
  

运行效果：

以上就是Javascript TAB栏切换效果的示例的详细内容，更多关于Javascript TAB栏切换效果的资料请关注考高分网其它相关文章！