html tab滑动切换 jquery tab选项卡滑动切换渐隐切换

特效描述：jquery tab选项卡 滑动切换 渐隐切换。jquery tab选项卡滑动切换渐隐切换

代码结构

1. 引入JS

2. HTML代码

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";}

a{color:#333;text-decoration:none;}

a:hover{color:#3366cc;text-decoration:underline;}

/* demo */

.demo{width:686px;margin:40px auto;position:relative;}

.demo h2{font-size:16px;height:44px;color:#3366cc;margin-top:20px;}

.demo dl dt{font-size:14px;color:#ff6600;margin-top:30px;font-weight:800;}

.demo dl dt,.demo dl dd{line-height:22px;}

/* tabbtn */

.tabbtn{height:30px;background:url(images/tabbg.gif) repeat-x;border-left:solid 1px #ddd;border-right:solid 1px #ddd;}

.tabbtn li{float:left;position:relative;margin:0 0 0 -1px;}

.tabbtn li a{display:block;float:left;height:30px;line-height:30px;overflow:hidden;width:108px;text-align:center;font-size:12px;cursor:pointer;}

.tabbtn li.current{border-left:solid 1px #d5d5d5;border-right:solid 1px #d5d5d5;border-top:solid 1px #c5c5c5;}

.tabbtn li.current a{border-top:solid 2px #ff6600;height:27px;line-height:27px;background:#fff;color:#3366cc;font-weight:800;}

/* tabcon */

.tabcon{border-width:0 1px 1px 1px;border-color:#ddd;border-style:solid;position:relative;/*必要元素*/height:180px;overflow:hidden;}

.tabcon .subbox{position:absolute;/*必要元素*/left:0;top:0;}

.tabcon .sublist{padding:5px 10px;height:170px;}

/* leftcon */

#leftcon .subbox{width:9999em;}

#leftcon .subbox .sublist{float:left;width:664px;}

/* sublist */

.sublist{padding:10px;}

.sublist li{height:28px;line-height:28px;font-size:12px;}

.sublist li span{margin:0 5px 0 0;font-family:"宋体";font-size:12px;font-weight:400;color:#ddd;}

实例1、上下滑动选项卡切换

jquery 特效javascript 特效div+css 教程HTML5 特效 ▪jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果▪jQuery浮动层点击图标按钮关闭或展开▪jquery浮动定位层导航描点上下滚动的浮动导航▪div css3样式表制作jquery返回顶部特效▪jquery 表格插件控制表格表格内容拖动标题