当前位置:主页 > 网页特效 > TAB标签 >

jquery和CSS3 Tabs选项卡

发布时间:2018/07/10 来源:互联网 浏览: 关键词:jquery CSS3 选项卡 tab 
jquery和CSS3 Tabs选项卡 jquery和CSS3 Tabs选项卡
阿里云

简要教程

这是一款基于Bootstrap的Tabs选项卡特效。该Tabs选项卡在bootstrap tabs的基础上,使用CSS3进行了一些效果美化,增强用户体验效果。

使用方法

在页面中引入bootstrap相关文件,以及jquery和font-awesome字体图标文件。

<linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"/>
<linkrel="stylesheet"type="text/css"href="css/font-awesome.css"/>
<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"><span><iclass="fa fa-globe"></i></span> Section 1</a></li>
                    <lirole="presentation"><ahref="#Section2"aria-controls="profile"role="tab"data-toggle="tab"><span><iclass="fa fa-rocket"></i></span> Section 2</a></li>
                    <lirole="presentation"><ahref="#Section3"aria-controls="messages"role="tab"data-toggle="tab"><span><iclass="fa fa-briefcase"></i></span> 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>Tabs选项卡一的内容...</p>
                    </div>
                    <divrole="tabpanel"class="tab-pane fade"id="Section2">
                        <h3>Section 2</h3>
                        <p>Tabs选项卡二的内容...</p>
                    </div>
                    <divrole="tabpanel"class="tab-pane fade"id="Section3">
                        <h3>Section 3</h3>
                        <p>Tabs选项卡三的内容...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS样式

通过下面的CSS代码来对Tabs选项卡进行效果的美化。

a:hover,a:focus{
    outline:none;
    text-decoration:none;
}
.tab{text-align:center; }
.tab .nav-tabs{
    display:inline-block;
    position:relative;
    border-bottom:none;
}
.tab .nav-tabs li{
    margin:0;
}
.tab .nav-tabs li a{
    display:block;
    padding:80px20px10px;
    background:#fff;
    font-size:17px;
    font-weight:700;
    color:#999;
    text-transform:uppercase;
    text-align:center;
    border-radius:0;
    border:none;
    border-bottom:2pxsolid#fff;
    margin-right:0;
    overflow:hidden;
    z-index:1;
    position:relative;
    transition:all0.3s ease0s;
}
.tab .nav-tabs li a span{
    display:block;
    width:50px;
    height:50px;
    line-height:50px;
    background:#f2f2f2;
    margin:auto;
    font-size:22px;
    color:#999;
    border-radius:5px;
    position:absolute;
    top:10px;
    left:0;
    right:0;
    transform:rotate(45deg);
}
.tab .nav-tabs li.active a span{
    background:#29335c;
    color:#fff;
}
.tab .nav-tabs li a span i{
    transform:rotate(-45deg);
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover{
    color:#999;
    border:none;
    border-bottom:2pxsolid#fff;
}
.tab .nav-tabs li.active a{
    border-bottom:2pxsolid#29335c;
}
.tab .tab-content{
    padding:20px;
    margin-top:-5px;
    font-size:15px;
    color:#757575;
    line-height:26px;
    text-align:left;
    border-top:1pxsolid#e5e5e5;
}
.tab .tab-content h3{
    font-size:24px;
    margin-top:0;
}
@media onlyscreenand (max-width:479px){
    .tab .nav-tabs li{
        width:100%;
        text-align:center;
        margin-bottom:5px;
    }
    .tab .nav-tabs li:last-child{
        margin-bottom:0;
    }
}

共有人阅读,期待你的评论!评论
Top