基于jquery和bootstrap,通过简单的十几行CSS代码,将原生的bootstrap选项卡进行美化,效果非常炫酷。
浏览器兼容
Chrome、 Opera、 Safari、Opera、IE9+
使用方法
1. 引入文件: <linkhref="css/bootstrap.min.css"rel="stylesheet"> <scriptsrc="js/jquery.min.js"></script> <scriptsrc="js/bootstrap.min.js"></script> 2. html: <div class="tab"role="tabpanel"> <!-- Nav tabs --> <ul class="nav nav-tabs"role="tablist"> <li role="presentation" class="active"><ahref="#Section1" aria-controls="home" role="tab" data-toggle="tab">Section 1</a></li> <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li> <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">Section 3</a></li> </ul> <!-- Tab panes --> <div class="tab-content tabs"> <div role="tabpanel" class="tab-pane fade in active"id="Section1"> <h3>Section 1</h3> <p>.......</p> </div> <div role="tabpanel" class="tab-pane fade"id="Section2"> <h3>Section 2</h3> <p>......</p> </div> <div role="tabpanel" class="tab-pane fade"id="Section3"> <h3>Section 3</h3> <p>.......</p> </div> </div> </div> 3. CSS: 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; } }