创意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;
    }
}