完美实现js选项卡切换效果(一)

本文实例为大家分享了js选项卡切换的具体代码，可以手动切换，另设置定时器可使其自动切换，供大家参考，具体内容如下

效果如图：

具体代码：

 
 


 *{
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-family: "微软雅黑";
  color: #000000;
  text-decoration: none;
  list-style-type: none;
 }
 #tab-list{
  width: 275px;
  height: 190px;
  margin: 30px auto;
 }
 #list{
  height: 32px;
  border-bottom: #8B4513 2px solid;
 }
 #list li{
  display: inline-block;
  width: 60px;
  border: 1px solid #999999;
  border-bottom: none;
  line-height: 30px;
  margin-left: 5px;
  text-align: center;
  cursor: pointer;
 }
 #list .active{
  border-top: 2px solid #8B4513;
  border-bottom: 2px solid #fff;
 }
 #tab-list div{
  border: 1px solid #7396B8;
  border-top: none;
 }
 #tab-list div li{
  height: 30px;
  line-height: 30px;
  text-indent: 8px;
 }
 #tab-list .show{
  display: block;
 }
 #tab-list .hidden{
  display: none;
 }





 

  
房产
家居
二手房
 
 
  

   
275万购昌平邻铁三居 总价20万买一居
   
200万内购五环三居 140万安家东三环
   
北京首现零首付楼盘 53万购东5环50平
   
京楼盘直降5000 中信府 公园楼王现房
  
 
 
  

   
40平出租屋大改造 美少女的混搭小窝
   
经典清新简欧爱家 90平老房焕发新生
   
新中式的酷色温情 66平撞色活泼家居
   
瓷砖就像选好老婆 卫生间烟道的设计
  
 
 
  

   
通州豪华3居260万 二环稀缺2居250w甩
   
西3环通透2居290万 130万2居限量抢购
   
黄城根小学学区仅260万 121平70万抛!
   
独家别墅280万 苏州桥2居优惠价248万
  
 

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

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