xhkjedu
/
xh_web

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .header_box {
        position: relative;
        margin: 0 auto;
        width: 13rem;
        height: 0.8rem;
        font-size: 0.14rem;
      }
      .header_box .header_right {
        float: right;
      }
      .header_box .header_right > .header_nav_item {
        position: relative;
        float: left;
        margin-left: 0.55rem;
        height: 0.8rem;
        line-height: 0.8rem;
        cursor: pointer;
      }
      .header_box .header_right > .header_nav_lang {
        position: relative;
        float: left;
        margin-left: 0.55rem;
        height: 0.8rem;
        line-height: 0.8rem;
        cursor: pointer;
      }
      .header_box .header_right > .header_nav_item > div::after {
        content: "";
        width: 0;
        position: absolute;
        background: #2d8cf0;
        height: 0.04rem;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transition: all 0.3s ease-out;
        -webkit-transition: all 0.3s ease-out;
      }
      .header_box .header_right > .header_nav_item:hover > div::after,
      .header_box .header_right > .header_nav_item.selected > div::after {
        width: 100%;
      }
      .header_box .header_right > .header_nav_lang .nav_language_en {
        background-color: #2d8cf0;
        position: absolute;
        top: 0.6rem;
        left: 50%;
        transform: translateX(-50%) translateY(50%);
        -webkit-transform: translateX(-50%) translateY(50%);
        padding: 0.06rem 0;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        visibility: hidden;
        opacity: 0;
        z-index: 100;
        text-align: center;
        font-size: 0.14rem;
        line-height: 0.4rem;
        color: #fff;
        border-radius: 0.08rem;
      }
      .header_box .header_right > .header_nav_lang:hover .nav_language_en {
        display: block;
        visibility: visible;
        transform: translateX(-50%) translateY(0%);
        -webkit-transform: translateX(-50%) translateY(0%);
        opacity: 1;
      }
      .header_box
        .header_right
        > .header_nav_lang:hover
        .nav_language_en::after {
        border-left: 0.07rem solid transparent;
        border-right: 0.07rem solid transparent;
        border-top: 0.09660254rem solid #2d8cf0;
        width: 0;
        height: 0;
        content: "";
        position: absolute;
        top: -0.08rem;
        left: 50%;
        transform: translateX(-50%) rotate(180deg);
        -webkit-transform: translateX(-50%) rotate(180deg);
      }
      .header_box .header_right > .header_nav_lang:hover .nav_language_en a {
        color: #fff;
        display: block;
        padding: 0;
        margin: 0 0.12rem;
        transition: all 0.3s ease-out;
        -webkit-transition: all 0.3s ease-out;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="header_box">
      <div></div>
      <div class="header_right">
        <div data-nav="1" class="header_nav_item nav_1">
          <div>产品中心</div>
        </div>
        <div data-nav="2" class="header_nav_item nav_2">
          <div>服务案例</div>
        </div>
        <div data-nav="3" class="header_nav_item nav_3">
          <div>关于我们</div>
        </div>
        <div data-nav="4" class="header_nav_item nav_4">
          <div>申请试用</div>
        </div>
        <div data-nav="5" class="header_nav_item nav_5">
          <div>新闻资讯</div>
        </div>
        <div class="header_nav_lang">
          中文
          <div class="nav_language_en">
            <a href="#" target="_blank">English</a>
          </div>
        </div>
      </div>
    </div>
    <script>
      $(function() {
        let nav_info = $(".header_root").data("nav_info");
        $(".header_box > .header_right > .header_nav_item").removeClass("selected");
        if (nav_info) {
          $(".header_box > .header_right > .header_nav_item.nav_" + nav_info).addClass("selected");
        }
        $(".header_box > .header_right").on("click", ".header_nav_item", function (ev) {
          $(".header_box > .header_right > .header_nav_item").removeClass("selected");
          let nav_num = $(this).data("nav");
          $(".header_box > .header_right > .header_nav_item.nav_" + nav_num).addClass("selected");
          if (nav_num === 1) {
            console.log("产品中心");
          } else if (nav_num === 2) {
            console.log("服务案例");
          } else if (nav_num === 3) {
            console.log("关于我们");
          } else if (nav_num === 4) {
            console.log("申请试用");
          } else if (nav_num === 5) {
            console.log("新闻资讯");
          }
        });
      });
    </script>
  </body>
</html>