jQuery 슬라이딩 옵션 효과

<style type="text/css">
.demo { 패딩: 2em 0; 배경: #fff; }
a:hover, a:focus { 개요: 없음; 텍스트 장식: 없음; }
.tab .nav-tabs { 테두리 하단: 없음; 위치: 상대; }
.tab .nav-tabs li { 여백-오른쪽: 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.3초 완화 0; }
.tab .nav-tabs li.active a, .tab .nav-tabs li a:hover { 색상: #fff; 테두리: 2px 솔리드 #956cae; }
.tab .nav-tabs li a:after { 내용: ""; 디스플레이: 블록; 너비: 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; }

@미디어 전용 화면 및 (최대 너비: 767px) {
.tab .nav-tabs li { 여백: 0 25px 0 0; }
}

@미디어 전용 화면 및 (최대 너비: 479px) {
.tab .nav-tabs li { 너비: 100%; 텍스트 정렬: 중앙; 여백: 0 0 10px 0; }
.tab .nav-tabs li:after { 너비: 0; 높이: 100%; 상단: 자동; 하단: -60%; 오른쪽: 50%; }
}
</스타일>

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