创意Tabs选项卡特效
简要教程
这是一款创意Tabs选项卡特效。该tabs选项卡基于jquery和bootstrap,通过简单的十几行CSS代码,将原生的bootstrap选项卡进行美化,效果非常炫酷。 使用方法 在页面中引入jquery和bootstrap相关文件。
<linkhref="css/bootstrap.min.css"rel="stylesheet"> <scriptsrc="js/jquery.min.js"></script> <scriptsrc="js/bootstrap.min.js"></script>
HTML结构 该tabs选项卡的基本HTML结构如下:
<divclass="container"> <divclass="row"> <divclass="col-md-offset-3 col-md-6"> <divclass="tab"role="tabpanel"> <!-- Nav tabs --> <ulclass="nav nav-tabs"role="tablist"> <lirole="presentation"class="active"><ahref="#Section1"aria-controls="home"role="tab"data-toggle="tab">Section 1</a></li> <lirole="presentation"><ahref="#Section2"aria-controls="profile"role="tab"data-toggle="tab">Section 2</a></li> <lirole="presentation"><ahref="#Section3"aria-controls="messages"role="tab"data-toggle="tab">Section 3</a></li> </ul> <!-- Tab panes --> <divclass="tab-content tabs"> <divrole="tabpanel"class="tab-pane fade in active"id="Section1"> <h3>Section 1</h3> <p>.......</p> </div> <divrole="tabpanel"class="tab-pane fade"id="Section2"> <h3>Section 2</h3> <p>......</p> </div> <divrole="tabpanel"class="tab-pane fade"id="Section3"> <h3>Section 3</h3> <p>.......</p> </div> </div> </div> </div> </div> </div>
CSS样式 然后通过下面的CSS代码来对tabs选项卡进行美化。
a:hover,a:focus{ text-decoration:none; outline:none; } .tab .nav-tabs{ border:none; border-bottom:2pxsolid#079fc9; margin:0; } .tab .nav-tabs li a{ padding:10px20px; margin:010px-1px0; font-size:17px; font-weight:600; color:#293241; text-transform:uppercase; border:2pxsolid#e6e5e1; border-bottom:none; border-radius:5px5px00; z-index:1; position:relative; transition:all0.3s ease0s; } .tab .nav-tabs li a:hover, .tab .nav-tabs li.active a{ background:#fff; color:#079fc9; border:2pxsolid#079fc9; border-bottom-color:transparent; } .tab .nav-tabs li a:before{ content:""; display:block; height:2px; background:#fff; position:absolute; bottom:-2px; left:0; right:0; transform: scaleX(0); transition:all0.3s ease-in-out0s; } .tab .nav-tabs li.active a:before, .tab .nav-tabs li a:hover:before{transform: scaleX(1); } .tab .tab-content{ padding:10px; font-size:17px; color:#6f6f6f; line-height:30px; letter-spacing:1px; position:relative; } @media onlyscreenand (max-width:479px){ .tab .nav-tabs{border:none; } .tab .nav-tabs li{ width:100%; text-align:center; margin-bottom:15px; } .tab .nav-tabs li a{ margin:0; border-bottom:2pxsolidtransparent; } .tab .nav-tabs li a:before{ content:""; width:100%; height:2px; background:#079fc9; position:absolute; bottom:-2px; left:0; } }
|