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

最新推荐文章于 2023-12-21 12:28:49 发布

转载最新推荐文章于 2023-12-21 12:28:49 发布

· 572 阅读

文章标签：

#html梯形选项卡

本文介绍了如何在网页中实现VIP特权选项，用户可以通过点击梯形选项1或2，在Type1和Type2内容间切换。通过JavaScript实现动态样式和层级控制，适合前端开发者了解前端交互设计和高级用例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;

}

![](https://www.aipinwang.com/static/web/img/zp.png)

![](https://www.aipinwang.com/static/web/img/leftbai.png)

![](https://www.aipinwang.com/static/web/img/zph.png)

![](https://www.aipinwang.com/static/web/img/lefthui.png)

梯形选项1111

![](https://www.aipinwang.com/static/web/img/hrs.jpg)

![](https://www.aipinwang.com/static/web/img/rightbai.png)

![](https://www.aipinwang.com/static/web/img/djh.png)

![](https://www.aipinwang.com/static/web/img/righthui.png)

梯形选项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);

});