html梯形选项卡,梯形选项卡，重叠选项，斜角选项卡，直角梯形

Document

.type2,#pay{

display:none;

}

.vip_content {

width: 929.5px;

border: solid 0.5px #dcdcdc;

border-top: none;

margin: 0 auto;

margin-top: 22px;

margin-bottom: 25px;

border-radius: 5px;

}

.vip_bar {

display: flex;

align-items: center;

position: relative;

height: 54px;

}

.vip_bar .one_option {

font-size: 17px;

letter-spacing: 1.3px;

color: #a1a1a1;

cursor: pointer;

height: 54px;

text-align: center;

display: flex;

align-items: center;

justify-content: center;

border-top: none;

width: 477.5px;

}

.privilege_option {

width: 475px;

z-index: 99;

position: absolute;

left: 0;

top: 0;

}

.num_option {

z-index: 99;

color: #a1a1a1;

position: absolute;

right: 0;

top: 0;

}

.vip_bar .this_option {

color: #3b3127 !important;

z-index: 200;

}

.vip_bar .bg_img {

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

margin-right: 0;

z-index: -1;

}

.vip_bar img {

width: 17px;

margin-right: 6.5px;

}

.box {

background-color: #fff;

padding: 25px 0;

}

.vip_msg {

width: 855px;

margin: 0 auto;

background-color: #fff;

}





梯形选项1111





梯形选项222

梯形选项内容1111

梯形选项内容2222

$(function () {

$(".privilege_option").click(function () {

$(this).addClass("this_option");

$(".num_option").removeClass("this_option");

$(".single").removeClass("single_this");

$(".type1").show();

$(".type2").hide();

$(".privilege_option").css("z-index", 200);

});

$(".num_option").click(function () {

$(this).addClass("this_option");

$(".privilege_option").removeClass("this_option");

$(".type1").hide();

$(".type2").show();

$(".privilege_option").css("z-index", 0);

});

});