h5梯形tab实现

在开发过程中,产品提出需要一个梯形tab进行pag的切换,如图所示:

在网上也找了很多梯形方案,最后都不适用,故采用如下方法进行实现:

1.让ui提供三个梯形图片:左直角梯形,右直角梯形,中间等腰梯形

2.通过点击事件切换里面的图形进行显示与隐藏即可

html代码如下:

<div class='yunying_header'>
                    <div class="header_top_two_tab" data-num='0' style='border-radius: .12rem 0 0 0;'>
                        <div class="tabfont">
                            历史详情
                        </div>
                        <div class='tixing lefttixing' style="display: block;">
                            <div>
                                历史详情
                            </div>
                        </div>
                    </div>
                    <div class="header_top_two_tab" data-num=1 id="twotab">
                        <div class="tabfont">
                            季度汇总
                        </div>
                        <div class='tixing midtixing'>
                            <div>
                                季度汇总
                            </div>
                        </div>
                    </div>
                    <div class="header_top_two_tab" data-num='2' style=' border-radius:0 .12rem 0 0;'>
                        <div class="tabfont">
                            老带新获客
                        </div>
                        <div class='tixing righttixing'>
                            <div>
                                老带新获客
                            </div>
                        </div>
                    </div> 
                </div>

css代码如下:

.yunying_header {
    height: .79rem;
    display: flex;
    justify-content: space-between;
    box-sizing: content-box;
    position: relative;
    padding-right: .24rem;
    padding-left: .24rem;
    margin-top: .12rem;
}

.header_top_two_tab {
    /* width: 33.333%; */
    width: calc(34% + 1px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.32rem;
    font-family: PingFangSC-Medium, PingFang SC;
    color: #666;
    cursor: pointer;
    position: relative;
    background: #EAEAEA;
}

.activeFontweight {
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
}

.lefttixing {
    position: absolute;
    left: 0;
    right: 0px;
    top: -2px;
    bottom: -1px;
    background: url(../img/titleleft.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

.midtixing {
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    bottom: -1px;
    background: url(../img/titlecenter.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

.righttixing {
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    bottom: -1px;
    background: url(../img/titleright.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

.tixing {
    display: none;
    border-radius: .08rem .08rem 0 0;
    z-index: 9999;
}

.tixing div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.32rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    cursor: pointer;
}

js代码如下:

$('.yunying_header').delegate('.header_top_two_tab', 'click', function (e) {
    e.stopPropagation();
    localgoshow = 0;
    $('.header_top_two_tab').find('.tixing').hide();
    $(this).find('.tixing').show();
    var num = $(this).attr('data-num');
    $('.wrapperone').each(function () {
        var datatab = $(this).attr('data-tab');
        if (datatab == num) {
            $(this).show();
        } else {
            $(this).hide();
        }
    })
})

通过上述代码可完美实现需求。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值