jq点击事件跳转页面及页面跳转传参，页面接收传参判断 tab显示选中

最新推荐文章于 2024-09-11 15:33:18 发布

এ᭄ꦿ十二ঞ

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量458

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/FANSILVLV/article/details/131549362

版权

jq 页面点击事件跳转


 <div class="tab">
     <div class="tab-list  " path="./baojia.html">
       <p class="text">报价留言</p>
       <div class="line"></div>
     </div>
     <div class="tab-list tab-active" path="./shop.html">
       <p class="text">商品留言</p>
       <div class="line"></div>
     </div>
     <div class="tab-list " path="./xunjia.html">
       <p class="text">优惠活动询价</p>
       <div class="line"></div>
     </div>
   </div>

 // tab跳转方法
  $(".tab .tab-list").click(function () {
    location.replace($(this).attr("path"));
  });

返回上一页

 // 跳转
  $(".return").click(function (event) {
    event.stopImmediatePropagation();
    window.history.go(-1);
  });

页面跳转传参

 // list详情跳转
  $(document).on("click", ".list", function () {
    window.location.href = "./konwReaduce.html?" + "td=" + "3"; //携带参数跳转
  });

页面接收传参判断显示tab选中

  <div class="tab">
   <div class="tab-list" path="../jiaoliu/index.html">
      <p class="text">羽绒交流</p>
      <div class="line"></div>
    </div>
    <div class="tab-list" path="./information.html">
      <p class="text">羽绒资讯</p>
      <div class="line"></div>
    </div>
    <div class="tab-list" path="./knowledge.html">
      <p class="text">羽绒知识</p>
      <div class="line"></div>
    </div>
    <div class="tab-list" path="./Dishonesty.html">
      <p class="text">失信曝光</p>
      <div class="line"></div>
    </div>
  </div>


 // 判断哪个tab 高亮
  function init() {
    let obj = this.getParams(window.location.href);
    let code = obj.td;
    $(".tab-list").each(function (idx, el) {
      console.log(idx);
      if (idx == code) {
        $(this).addClass("tab-active");
      }
    });
  }
  init();

  // 截取code字符串
  function getParams(url) {
    let obj = {};
    let index = url.indexOf("?"); // 看url有没有参数
    // console.log("index",index);
    let params = url.substr(index + 1); // 截取url参数部分 id = 1 & type = 2
    //console.log(params);
    if (index != -1) {
      // 有参数时
      let parr = params.split("&"); // 将参数分割成数组 ["id = 1 ", " type = 2"]
      for (let i of parr) {
        // 遍历数组
        let arr = i.split("="); // 1） i id = 1   arr = [id, 1]  2）i type = 2  arr = [type, 2]
        obj[arr[0]] = arr[1]; // obj[arr[0]] = id, obj.id = 1   obj[arr[0]] = type, obj.type = 2
      }
    }
    return obj;
  }