jquery实现有过渡效果的tab切换

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

效果：

代码：

 
 
 
 
 ul,li {
 list-style: none;
 margin: 0;
 padding: 0;
 }
 .tabBox {
 width: 400px;
 height: 200px;
 border: 1px solid pink;
 }
 .ul1 {
 height: 40px;
 border-bottom: 1px solid pink;
 }
 .ul1 li {
 width: 25%;
 line-height: 40px;
 text-align: center;
 float: left;
 cursor: pointer;
 }
 .ul1 li.active {
 background-color: pink;
 transition: all 0.6s ease-in-out; 
 }
 .ul2 {
 overflow: hidden;
 }
 .ul2 li {
 display: none;
 }
 .ul2 li.selected {
 display: block;
 }
 
 
 
 
 

 
标题1
 
标题2
 
标题3
 
标题4
 
 

 
内容内容1
 
内容2内容2
 
内容3内容3
 
内容4内容4
 
 
 
 
 
 

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

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