<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>    .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;      }    </style>  </head>  <body>    <div class="vip_content">      <div class="vip_bar">        <div class="one_option privilege_option this_option">          <!-- 选中 -->          ![](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        </div>        <div class="one_option num_option">          <!-- 选中 -->          ![](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        </div>      </div>      <div class="box type1">          <!-- tex -->        <div class="vip_msg">梯形选项内容1111</div>      </div>      <div class="box type2">        <div class="vip_msg">梯形选项内容2222</div>      </div>    </div>  </body></html><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>  $(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);    });  });</script>