<樣式類型=“text/css”>
.demo { 填充：2em 0;背景：#fff； }
a：懸停，a：焦點(diǎn){大綱：無(wú)；文本裝飾：無(wú)； }
.tab .nav-tabs { 邊框底部：無(wú)；位置：相對(duì)； }
.tab .nav-tabs li { margin-right: 60px; z 索引：1； }
.tab .nav-tabs li:after { 內(nèi)容: "";寬度：100%；邊框：1px實(shí)線#ccc6c6；位置：絕對(duì)；頂部：50%；右：-60%； z 索引：-1； }
.tab .nav-tabs li:last-child:after { 邊框: 無(wú); }
.tab .nav-tabs li a { 顯示：塊；內(nèi)邊距：15 像素 20 像素；背景：#fff；字體大?。?5px；字體粗細(xì)：600；顏色：#956cae；文本轉(zhuǎn)換：大寫；邊界半徑：0；右邊距：0；邊框：2px實(shí)線#956cae；位置：相對(duì)；溢出：隱藏； z 索引：1；過(guò)渡：所有 0.3s 緩和 0s； }
.tab .nav-tabs li.active a, .tab .nav-tabs li a:hover { color: #fff;邊框：2px實(shí)線#956cae； }
.tab .nav-tabs li a:after { 內(nèi)容: "";顯示：塊；寬度：100%；高度：0；位置：絕對(duì)；頂部：0；左：0； z 索引：-1；過(guò)渡：所有 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；字體大?。?4px；顏色：#999；行高：26px； }
.tab .tab-content h3 { 字體大?。?4px;頂部邊距：0； }

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

@media only 屏幕和（最大寬度：479px）{
.tab .nav-tabs li { 寬度：100%;文本對(duì)齊：居中；邊距：0 0 10px 0； }
.tab .nav-tabs li:after { 寬度: 0;高度：100%；頂部：自動(dòng)；底部：-60%；右：50%； }
}
</風(fēng)格>

這是一款基于jQuery+Bootstrap實(shí)現(xiàn)的滑動(dòng)選項(xiàng)卡代碼，簡(jiǎn)潔的紙張風(fēng)格個(gè)性選項(xiàng)卡切換效果，鼠標(biāo)懸停時(shí)還有動(dòng)畫效果。