js html页面跳转新页面对应的tab以及tab切换效果

点击跳转页

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>点击跳转页</title>
  </head>
  <body>
    <a class="page" href="./jc_traffic.html?type=0">跳转a11页面</a>
    <a class="page" href="./jc_traffic.html?type=1">跳转b11页面</a>
    <a class="page" href="./jc_traffic.html?type=2">跳转c11页面</a>
  </body>
</html>

被跳转页

<ul class="tab">
        <li class="act">a</li>
        <li>b</li>
        <li>c</li>
</ul>
<ul class="con">
		<li class="show">a11</li>
        <li>b11</li>
        <li>c11</li>
</ul>

js
// 点击tab切换页面
    $(".tab li").on("click", function () {
      $(this).addClass("act").siblings().removeClass("act");
      $(".con li").eq($(this).index()).show().siblings().hide();
    });
    $(function () {
      // getQueryVariable函数用于获取url携带参数
      var type = getQueryVariable("type");
      console.log(type);
      if (type) {
        $(".tab li").eq(type).click();
      }
    }); // 方式一(正则表达式) // variable为url参数的key
    function getQueryVariable(variable) {
      // 构造一个含有variable(目标)参数的正则表达式对象
      var reg = new RegExp("(^|&)" + variable + "=([^&]*)(&|$)"); //获得了当前链接的中?号后的参数(匹配目标参数)
      var r = window.location.search.substr(1).match(reg);
      console.log(r); //返回目标参数 // unescape() 函数可对通过 escape() 编码的字符串进行解码。
      if (r != null) return unescape(r[2]);
      return null;
    }


css
.tab {
    padding: 0 5%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
    background-color: #ffffff;
    li {
      width: 25%;
      text-align: center;
      color: #333333;
      font-size: 0.28rem;
    }
    li:last-child {
      width: 30%;
    }
    .act {
      font-size: 0.32rem;
      position: relative;
      color: #177dd1;
      &::after {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        content: "";
        width: 0.32rem;
        height: 0.08rem;
        background: linear-gradient(
          90deg,
          rgba(114, 190, 255, 1) 0%,
          rgba(21, 123, 208, 1) 100%
        );
        border-radius: 0.04rem;
      }
    }
  }
  .con {
    padding: 0 0.4rem;
    box-sizing: border-box;
    width: 100vw;
    li {
      display: none;
    }
    .show {
      display: block;
    }
}
   

你可能感兴趣的:(js html页面跳转新页面对应的tab以及tab切换效果)