tab切换及样式效果展现

页面结构

 <div class="tab">
        <div class="tabDiv"><a href="javascript:void(0)" class="active">未使用</a></div>
        <div class="tabDiv"><a href="javascript:void(0)">已使用</a></div>
        <div class="tabDiv"><a href="javascript:void(0)">已过期</a></div>
    </div>

  <div class="tabContent">
        <div class="singleContent">
            <div class="content">
                <div class="contentAll">
                    <div class="contentMsg">
                        <p><span>双人自助晚餐券</span></p>
                        <p><span>Dinner buffet for two persons</span></p>
                    </div>
                    <div class="contentUse">
                        <p><span οnclick="useCoupon()">使用</span></p>
                        <p><span>转赠</span></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="singleContent">
            <div class="content">
                <div class="contentAll">
                    <div class="contentMsg">
                        <p><span>双人自助晚餐券</span></p>
                        <p><span>Dinner buffet for two persons</span></p>
                    </div>
                    <div class="contentUse">
                        <p><span>已使用</span></p>
                        <p><span>转赠</span></p>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="contentAll">
                    <div class="contentMsg">
                        <p><span>双人自助晚餐券</span></p>
                        <p><span>Dinner buffet for two persons</span></p>
                    </div>
                    <div class="contentUse">
                        <p><span>已使用</span></p>
                        <p><span>转赠</span></p>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="contentAll">
                    <div class="contentMsg">
                        <p><span>双人自助晚餐券</span></p>
                        <p><span>Dinner buffet for two persons</span></p>
                    </div>
                    <div class="contentUse">
                        <p><span>已使用</span></p>
                        <p><span>转赠</span></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="singleContent">
            <div class="content">
                <div class="contentAll">
                    <div class="contentMsg">
                        <p><span>双人自助晚餐券</span></p>
                        <p><span>Dinner buffet for two persons</span></p>
                    </div>
                    <div class="contentUse">
                        <p><span>已过期</span></p>
                        <p><span>转赠</span></p>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="contentAll">
                    <div class="contentMsg">
                        <p><span>双人自助晚餐券</span></p>
                        <p><span>Dinner buffet for two persons</span></p>
                    </div>
                    <div class="contentUse">
                        <p><span>已过期</span></p>
                        <p><span>转赠</span></p>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="contentAll">
                    <div class="contentMsg">
                        <p><span>双人自助晚餐券</span></p>
                        <p><span>Dinner buffet for two persons</span></p>
                    </div>
                    <div class="contentUse">
                        <p><span>已过期</span></p>
                        <p><span>转赠</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

css

body{
    font-size: 0.16rem;
}
.tab{
    width: 100%;
    display: flex;
    box-shadow: 0 3px 3px rgba(63, 63, 63, 0.1);
}
.tabDiv{
    flex: 1;
    text-align: center;
}
.tabDiv a{
    width: 0.83rem;
    height: 0.35rem;
    line-height: 0.35rem;
    /* background: red; */
    text-align: center;
    display: inline-block;
    color: #939393;
}
.tabDiv:nth-of-type(1) a{
    float: right;
}
.tabDiv:nth-of-type(3) a{
    float: left;
}
.active{
    background: rgba(63, 63, 63, 0.8);
    color: #ffffff !important;
}
.tabContent{
    overflow: hidden;
    width: 100%;
}
.content{
    width: 3.5rem;
    height: 1.4rem;
    background: url('../image/contentBg.png');
    background-size: contain;
    margin: 0rem auto;
}
.content:nth-of-type(1){
    margin-top: 0.15rem;
}
.contentAll{
    margin-top: 0.06rem;
    width: 100%;
    display: flex;
}
.contentMsg{
    flex: 3;
    margin-top: 0.14rem;
    margin-left: 0.2rem;
    height: 0.85rem;
    border-right: 1px solid #e5e5e5;
}
.contentMsg p:nth-of-type(1){
    margin-top: 0.24rem;
}
.contentMsg p:nth-of-type(2){
    height: 0.3rem;
    line-height: 0.3rem;
}
.contentMsg p:nth-of-type(1) span{
    font-size: 0.18rem;
    color: #656565;
}
.contentMsg p:nth-of-type(2) span{
    font-size: 0.14rem;
    color: #e5e5e5;
}
.contentUse{
    flex: 1;
    margin-top: 0.12rem;
    height: 0.85rem;
}
.contentUse p{
    text-align: center;
}
.contentUse p span{
    text-align: center;
    line-height: 0.4rem;
    height: 0.4rem;
    display: inline-block;
    width: 0.56rem;
}
.contentUse p:nth-of-type(1) span{
    margin-top: 0.04rem;
    border-bottom: 1px solid #e5e5e5;
    color: #b5a117;
}
.contentUse p:nth-of-type(2) span{
    color: #838383;
}
.singleContent{
    display: none;
}
.singleContent:nth-of-type(1){
    display: block;
}
/* 弹出层开始 */
.popUp{
    width: 3.03rem;
    height: 1.82rem;
    position: fixed;
    z-index: 2;
    left: 50%;
    top: 40%;
    transform: translate(-50%,-50%);
    display: none;
}
.upMsg{
    background: rgba(181, 181, 181, 0.8);
    padding: 0.26rem;
}
.popUpTitle{
    color: #ffffff;
    height: 0.4rem;
    line-height: 0.4rem;
    text-align: center;
    font-size: 0.19rem;
}
.popUpInput input{
    height: 0.35rem;
    line-height: 0.35rem;
    border: 0;
    width: 100%;
    padding-left: 0.05rem;
}
.popUpBtn{
    width: 100%;
    display: flex;
}
.popUpBtn button{
    flex: 1;
    border: 0;
    height: 0.45rem;
    line-height: 0.45rem;
    color: #ffffff;
    font-size: 0.17rem;
}
.popUpBtn button:nth-of-type(1){
    background: #b5a117;
    color: #ffffff;
}
.popUpBtn button:nth-of-type(2){
    background: #707070;
}
/* 弹出层结束 */

js效果展示

$('.tab').children('div').click(function(){
        // console.log( $(this).index() );
        $('.tab').children('div').find('a').removeClass('active');
        $(this).find('a').addClass('active');
        $('.tabContent').children('.singleContent').eq( $(this).index() ).css({
            'display':'block'
        }).siblings('div').css({
            'display':'none',
        })
    })

414px设计图rem计算

! function () {
    function a() {
        var _width;
        var clientWidth = document.documentElement.clientWidth;
        if (clientWidth > 568) {
            _width = 568;
        } else if (clientWidth < 320) {
            _width = 320;
        } else {
            _width = clientWidth;
        }
        // var pageWid = (window.innerWidth > document.querySelector('body').offsetHeight) ? 1136 : 640;
        document.documentElement.style.fontSize = _width / 414 * 100 + "px";
    }
    var b = null;
    document.addEventListener("DOMContentLoaded", function () {
        window.addEventListener("resize", function () {
            clearTimeout(b);
            b = setTimeout(a, 300)
        }, !1);
        a()
    }, false);
}(window);