javascript实现tab切换特效

本文为大家分享了javascript实现tab切换特效的方法，具体的实现内容如下，先看一下效果图：

很简单的javascript实现tab切换特效

*{
 margin: 0;
 padding: 0;
}
div{
 width: 184px;
 height: 100px;
 border: 1px solid gray;
 display: none;
}
.tab{
 list-style: none;
 width: 200px;
 overflow: hidden;
}
.tab li{
 float: left;
 width: 60px;
 border: 1px solid red;
 height: 30px;
 line-height: 30px;
 vertical-align: middle;
 text-align: center;
 cursor: pointer;
}
.on{
 display: block;
}
.cur{
 background: red;
 color: #fff;
}


 



 
最新
 
热门
 
新闻

11
22
33

这个实例只是为大家简单介绍了javascript实现tab切换特效，希望对大家的学习有所帮助。