北京pk10直播

jQuery創意Tabs選項卡

所屬分類:媒體-Tabs

 1466  11  查看評論 (0)
分享到微信朋友圈
X
jQuery創意Tabs選項卡 ie兼容10

使用方法

在頁面中引入jquery和bootstrap相關文件。

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

HTML結構

該tabs選項卡的基本HTML結構如下::

<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <div class="tab" role="tabpanel">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#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>
        </div>
    </div>
</div>

tabs選項卡美化效果

CSS樣式

然后通過下面的CSS代碼來對tabs選項卡進行美化。

a:hover,a:focus{
    text-decoration: none;
    outline: none;
}
.tab .nav-tabs{
    border: none;
    border-bottom: 2px solid #079fc9;
    margin: 0;
}
.tab .nav-tabs li a{
    padding: 10px 20px;
    margin: 0 10px -1px 0;
    font-size: 17px;
    font-weight: 600;
    color: #293241;
    text-transform: uppercase;
    border: 2px solid #e6e5e1;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    z-index: 1;
    position: relative;
    transition: all 0.3s ease 0s;
}
.tab .nav-tabs li a:hover,
.tab .nav-tabs li.active a{
    background: #fff;
    color: #079fc9;
    border: 2px solid #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: all 0.3s ease-in-out 0s;
}
.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 only screen and (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: 2px solid transparent;
    }
    .tab .nav-tabs li a:before{
        content: "";
        width: 100%;
        height: 2px;
        background: #079fc9;
        position: absolute;
        bottom: -2px;
        left: 0;
    }
}
相關插件-Tabs

Tab+無縫滾動雙重組合

Tab標簽切換+無縫滾動組合
  Tabs
 32603  209

jquery水平滑動tab選項卡

jquery水平滑動tab選項卡
  Tabs
 42968  341

適合手機、pad等移動終端的tab響應式切換效果

適合手機、pad等移動終端的tab響應式切換效果
  Tabs
 44830  311

京東首頁的多重tab

京東首頁的多重tab
  Tabs
 21684  175

討論這個項目(0)回答他人問題或分享插件使用方法獎勵jQ幣 評論用戶自律公約

取消回復
北京pk10直播 体球即时网 广东快乐10分 大赢家即时指数 双色球 急速赛车 球探体育比分老版本 韩国快乐8 雪缘园比分直播网 qq分分彩 虎扑nba比分 广东36选7 胜分差 nba比分表 浙江快乐12 球探体育比分即时足球比分 青海11选5