本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果。分享给大家供大家参考。具体如下：
这里汇总了几个Tab，滑动门，选项卡，图片切换，在一个网页中实现了超多的常用效果，大家喜欢的滑动门，焦点图切换，标签选项卡以及文字轮番等都集中在了一起，无聊的功劳，忙的时候还顾不上写，另外还加入了圆角，都是参考以前学习的知识写的。期间使用了jquery-1.6.2.min.js框架库。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-n-tab-cha-pic-codes/
具体代码如下：
Tab html body {margin:0px; padding:0px;} .t_body{border:1px solid #ddd; padding:10px; width:250px; margin:50px;float:left;} .aa {background-color:#eee; width:25px; cursor:pointer; float:left; margin-left:10px; text-align:center;} .bb {background-color:#eae; width:250px; height:250px; display:none; font-size:50px;} .cc {background-color:#eee; width:100%; height:20px; display:none;} .on {background-color:#c21; width:30px; border-bottom:0px; border-top:0px;} .yuan1 span {display: block;overflow: hidden;height: 1px; border-color:#77a;} .yuan2 span {display: block;overflow: hidden;height: 1px; border-color:#77a;} .span1 {margin:0px 3px; background-color:#77a;} .span2 {margin:0px 1px; border-left:2px solid; border-right:2px solid;} .span3 {margin:0px 1px; border-left:1px solid; border-right:1px solid;} .d_body {margin:50px;width:400px; height:400px; font-size:12px;float:left;} .d_top {height:40px; border-left:1px solid #77a; border-right:1px solid #77a;} .d_t {float:left; margin-top:7px; margin-left:10px; border:1px solid #77a; width:100px; height:31px; line-height:31px; background-color:#eee;} .d_t a {color:#555; text-decoration:none;} .d_t a:hover {color:#933; text-decoration:underline; font-weight:bold; } .d_main {border:1px solid #77a; border-top:0px; height:300px;} .ln {position:relative; border-bottom:1px solid #77a; top:40px; z-index:-1;} .bbb {background-color:#fff; height:100%; display:none; margin:10px;} .on1 {border-bottom:1px solid #fff; background-color:#fff;} .fl {float:left;} .clr {clear:both;} .of {overflow:hidden;} .textcenter{text-align:center;vertical-align:middle;} 鼠标悬浮切换
第一个标签 第二个标签 第三个标签 第一个内容 第二个内容 第三个内容 点击切换
第一个标签 第二个标签 第三个标签 第一个内容 第二个内容 第三个内容 a b c d e
1 2 点击切换 4 5 a b c d e
1 2 3 4 5 a b c d e
1 2 3 4 5 a b c d e
1 2 悬浮切换 4 5 111111 222222 333333 444444 555555 a b c d e
1 2 3 4 5 111111 222222 333333 444444 555555 a b c d e
1 2 3 4 5 111111 222222 333333 444444 555555
希望本文所述对大家的jQuery程序设计有所帮助。
