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

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

通过设置定时器实现延时0.5s切换，一个重要的技巧是定义了一个that变量来存放当前指针this。

之所以不能在这直接引用this是因为setTimeout是window对象，用this的话会指向定时器，所以要在前面定义一个变量。
还要注意调用定时器前要判断是否存在准备执行的定时器。

效果如图：

具体代码：

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