jQueryのスライディングオプションの効果

<style type="text/css">
.demo { パディング: 2em 0;背景: #fff; }
a:hover、a:focus { アウトライン: なし;テキスト装飾: なし。 }
.tab .nav-tabs { border-bottom: なし;位置: 相対的; }
.tab .nav-tabs li { margin-right: 60px; z インデックス: 1; }
.tab .nav-tabs li:after { content: "";幅: 100%;境界線: 1 ピクセルの実線 #ccc6c6;位置: 絶対;トップ: 50%;右: -60%; z インデックス: -1; }
.tab .nav-tabs li:last-child:after { border: none; }
.tab .nav-tabs li a { 表示: ブロック;パディング: 15 ピクセル 20 ピクセル;背景: #fff;フォントサイズ: 15px;フォントの太さ: 600;色: #956cae;テキスト変換: 大文字;境界半径: 0;右マージン: 0;ボーダー: 2px ソリッド #956cae;位置: 相対的;オーバーフロー: 非表示; z インデックス: 1;トランジション: すべての 0.3 は 0 を緩和します。 }
.tab .nav-tabs li.active a、.tab .nav-tabs li a:hover { color: #fff;ボーダー: 2px ソリッド #956cae; }
.tab .nav-tabs li a:after { content: "";表示ブロック;幅: 100%;高さ: 0;位置: 絶対;トップ: 0;左: 0; z インデックス: -1;トランジション: すべての 0.3 は 0 を緩和します。 }
.tab .nav-tabs li.active a:after、.tab .nav-tabs li a:hover:after { 高さ: 100%;背景: #956cae; }
.tab .tab-content { パディング: 20px 10px;マージントップ: 0;フォントサイズ: 14px;色: #999;行の高さ: 26px; }
.tab .tab-content h3 { フォントサイズ: 24px;マージントップ: 0; }

@media のみの画面と (最大幅: 767px) {
.tab .nav-tabs li { マージン: 0 25px 0 0; }
}

@media のみの画面と (最大幅: 479px) {
.tab .nav-tabs li { 幅: 100%;テキスト整列: 中央;マージン: 0 0 10px 0; }
.tab .nav-tabs li:after { width: 0;高さ: 100%;上: 自動;下: -60%;右: 50%。 }
}
</style>

これは、jQuery Bootstrap に基づいて実現されたスライド セレクション コードであり、厳密に平坦なプロパティ セレクション スイッチング機能、マウス停止時のアニメーション効果も備えています。