h5梯形tab实现_梯形tab栏切换-CSDN博客

本文链接：https://blog.csdn.net/sunshineboysy/article/details/107933939

在开发过程中，产品提出需要一个梯形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();
        }
    })
})

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