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 { 顯示：塊；內邊距：15px 20px；背景：#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 { 邊距：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實現的滑動選項卡代碼，簡潔的紙張風格個性選項卡切換效果，滑鼠懸停時還有動畫效果。