JavaScript实现tab栏切换效果

本文实例为大家分享了Javascript实现tab栏切换效果的具体代码，供大家参考，具体内容如下

 
 
 
  
 
  * {
   margin: 0;
   padding: 0;
  }
  .box {
   width: 600px;
   margin: 100px 500px;
   border: 1px solid #999;
  }
  li {
   list-style: none;
  }
  .tab_top {
   width: 600px;
   height: 50px;
   background-color: #ccc;
  }
  .tab_top li {
   float: left;
   width: 50px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   padding: 0 20px;
  }
  .current {
   background-color: red;
   color: #fff;
  }
  .tab_con {
   width: 600px;
   height: 300px;
   background-color: #fff;
  }
  先在css里面设置下面小div全部隐藏
  .item {
   display: none
  }
 
 
 
 
  
   

    
标题一
    
标题二
    
标题三
    
标题四
    
标题五
   
  
  
    --->此处默认第一个显示
    我是内容一

    我是内容一

    我是内容一

    我是内容一

    我是内容一

   
   
    我是内容二

    我是内容二

    我是内容二

    我是内容二

    我是内容二

   
   
    我是内容三

    我是内容三

    我是内容三

    我是内容三

    我是内容三

   
   
    我是内容四

    我是内容四

    我是内容四

    我是内容四

    我是内容四

   
   
    我是内容五

    我是内容五

    我是内容五

    我是内容五

    我是内容五

    我是内容五

   
  
 

js:

效果图：

如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

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