选项卡

用法

示例1

HTML

<div class="baie-tab">
    <ul class="baie-tabbar">
        <li class="active"><a href="javascript:;">主页</a></li>
        <li><a href="javascript:;">原创</a></li>
        <li><a href="javascript:;">活动</a></li>
        <li><a href="javascript:;">品牌</a></li>
    </ul>

    <div class="baie-tabbox">
        <div class="baie-tabcon active">这是主页的内容</div>
        <div class="baie-tabcon">这是原创的内容</div>
        <div class="baie-tabcon">这是活动的内容</div>
        <div class="baie-tabcon">这是品牌的内容</div>
    </div>
</div>

CSS

.baie-tab {
    background-color: #fff;
}
.baie-tabbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    list-style: none;
    background-color: #fafafa;
}
.baie-tabbar li {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
.baie-tabbar li:nth-child(n+2) {
    margin-left: -1px;
}
.baie-tabbar li a {
    display: block;
    padding: .26rem 0;
    border:1px solid #e4e4e4;
    color: #161616;
    text-align: center;
    font-size: .30rem;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.baie-tabbar li:active a {
    background-color: #ededed;
}
.baie-tabbar li.active a {
    background-color: #eaeaea;
}
.baie-tabbar .baie-icon_dropdown {
    margin-top: -.04rem;
    font-size: .36rem;
    color: #666;
}
.baie-tabcon {
    display: none;
    padding: .30rem;
}
.baie-tabcon.active {
    display: block;
}

示例2

HTML

<ul class="baie-tabbar baie-tabbar_s1">
    <li class="active"><a href="javascript:;">自由积分</a></li>
    <li><a href="javascript:;">一阶积分</a></li>
    <li><a href="javascript:;">二阶积分</a></li>
    <li><a href="javascript:;">分类<i class="iconfont icon-triangle"></i></a></li>
</ul>

CSS

<示例1的样式为共用>

.baie-tabbar_s1 {
    width: 100%;
    list-style: none;
    background-color: #fff;
}
.baie-tabbar_s1 li a {
    padding: .08rem .04rem;
    border-color: #ea5504;
    border-radius: .10rem;
    color: #ea5504;
    white-space: nowrap;
}
.baie-tabbar_s1 li:active a {
    background-color: #f8f8f8;
}
.baie-tabbar_s1 li.active a {
    color: #fff;
    background-color: #ea5504;
}
.baie-tabbar_s1 li:first-child a { /* 圆角 START */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.baie-tabbar_s1 li:not(:first-child):not(:last-child) a {
    border-radius: 0;
}
.baie-tabbar_s1 li:last-child a { /* 圆角 END */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.baie-tabbar_s1 .baie-icon_dropdown {
    margin-left: .06rem;
    width: .18rem;
    height: .18rem;
}
.baie-tabbar_s1 .icon-triangle {
    margin: .02rem 0 0 .06rem;
    font-size: .18rem;
    color: #ea5503;
}

示例3

HTML

<ul class="baie-tabbar baie-tabbar_s2">
    <li class="active"><a href="javascript:;">主页</a></li>
    <li><a href="javascript:;">原创</a></li>
    <li><a href="javascript:;">活动</a></li>
    <li><a href="javascript:;">品牌</a></li>
    <li><a href="javascript:;">口碑</a></li>
</ul>

CSS

<示例1的样式为共用>

.baie-tabbar_s2 {
    list-style: none;
    background-color: #fff;
    border-bottom: 1px solid #e4e4e4;
}
.baie-tabbar_s2 li a {
    position: relative;
    padding: .20rem 0;
    border-color: #e4e4e4;
    border: none;
    color: #161616;
}
.baie-tabbar_s2 li:active a {
    background-color: #f8f8f8;
}
.baie-tabbar_s2 li.active a {
    color: #ea5404;
    background-color: #fff;
}
.baie-tabbar_s2 li.active a:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #ea5404;
}