jQuery滑动选项特效

<样式类型=“text/css”>
.demo { 填充：2em 0;背景：#fff； }
a：悬停，a：焦点{大纲：无；文本装饰：无； }
.tab .nav-tabs { 边框底部：无；位置：相对； }
.tab .nav-tabs li { margin-right: 60px; z 索引：1； }
.tab .nav-tabs li:after { 内容: "";宽度：100%；边框：1px实线#ccc6c6；位置：绝对；顶部：50%；右：-60%； z 索引：-1； }
.tab .nav-tabs li:last-child:after { 边框: 无; }
.tab .nav-tabs li a { 显示：块；内边距：15 像素 20 像素；背景：#fff；字体大小：15px；字体粗细：600；颜色：#956cae；文本转换：大写；边界半径：0；右边距：0；边框：2px实线#956cae；位置：相对；溢出：隐藏； z 索引：1；过渡：所有 0.3s 缓和 0s； }
.tab .nav-tabs li.active a, .tab .nav-tabs li a:hover { color: #fff;边框：2px实线#956cae； }
.tab .nav-tabs li a:after { 内容: "";显示：块；宽度：100%；高度：0；位置：绝对；顶部：0；左：0； z 索引：-1；过渡：所有 0.3s 缓和 0s； }
.tab .nav-tabs li.active a:after, .tab .nav-tabs li a:hover:after { height: 100%;背景：#956cae； }
.tab .tab-content { 填充：20px 10px;顶部边距：0；字体大小：14px；颜色：#999；行高：26px； }
.tab .tab-content h3 { 字体大小：24px;顶部边距：0； }

@media only 屏幕和（最大宽度：767px）{
.tab .nav-tabs li { margin: 0 25px 0 0; }
}

@media only 屏幕和（最大宽度：479px）{
.tab .nav-tabs li { 宽度：100%;文本对齐：居中；边距：0 0 10px 0； }
.tab .nav-tabs li:after { 宽度: 0;高度：100%；顶部：自动；底部：-60%；右：50%； }
}
</风格>

这是一款基于jQuery+Bootstrap实现的滑动选项卡代码，简洁的纸张风格个性选项卡切换效果，鼠标悬停时还有动画效果。