jquery 点击左侧列表跳转另一页面，左侧列表保持不变

#####################

// 引入jquery 文件包
<script src="../static/js/jquery.min.js"></script>
// 首页的js方法
<script>
  var big_title = NaN // 定义全局变量，存储点击的大标题的ID
  var small_title = NaN // 定义全局变量，存储点击的小标题的ID
	// 点击左侧列表大标签下的小标题
  $(".layui-nav-child>dd").click(function () {
    // 点击标题添加背景色
    $(this).addClass("layui-this").siblings().removeClass("layui-this");
    // 获取大标题的所有元素
    big_children = $('.layui-nav-item').siblings(".layui-nav-itemed").prevObject
    // 获取小标题的所有元素
    samll_children = $('.layui-nav-child>dd').siblings(".layui-nav-itemed").prevObject
    var big_title = NaN // 存储点击的大标题的ID
  	var small_title = NaN // 存储点击的小标题的ID
    for (var i = 0; i < big_children.length; i++) {
	// 判断大标题中的class样式。如果有 'layui-nav-item  layui-nav-itemed' 样式，说明用户点击的就是该元素，从而获取大标题的ID
      if ($(big_children[i]).attr("class") == 'layui-nav-item  layui-nav-itemed') {
        big_title = i
      }
    }
    for (var o = 0; o < samll_children.length; o++) {
	// 判断小标题中的class样式。如果有 'layui-this' 样式，说明用户点击的就是该元素，从而获取小标题的ID
      if ($(samll_children[o]).attr("class") == "layui-this") {
        small_title = o
      }
    }
	// 获取点击元素中定义的name值，根据name值判断要跳转那个页面
    var a_title = $(this).html()
    href = $(this).attr("name")
    
    url = href + "/"
    // 执行后端方法
     $.ajax({
       //请求方式
       type: "GET",
       //请求的媒体类型
       contentType: "application/json;charset=UTF-8",
       //请求地址
       url: url,
       //数据，json字符串
       data: {
         'a_title': a_title,
         'big_title': big_title,
         'small_title': small_title,
       },
       //请求成功
       success: function (result) {
         // 跳转到下一页
         window.location.href = url + "?a_title=" + a_title + '&big_title=' + big_title + '&small_title=' + small_title;
       },
       //请求失败，包含具体的错误信息
       error: function (e) {
         console.log(e.status);
         console.log(e.responseText);
       }
     })
  })
</script>

// 左侧列表的js方法
<script src="/static/js/layui.js"></script>
<!--调用分页的js方法-->
<script src="/static/js/laypage.js"></script>
<script src="/static/js/jquery.min.js"></script>
<script>
	// 点击大标题，关闭其他选项
  $(".layui-nav-item ").click(function () {
    // siblings() 找到除本身外的同级其他元素
    $(this).addClass("layui-nav-itemed").siblings().removeClass("layui-nav-itemed");
  })
  // 点击左侧列表大标签下的小标题
  $(".layui-nav-child>dd").click(function () {
    // 点击标题添加背景色
    $(this).addClass("layui-this").siblings().removeClass("layui-this");
    big_children = $('.layui-nav-item').siblings(".layui-nav-itemed").prevObject
    samll_children = $('.layui-nav-child>dd').siblings(".layui-nav-itemed").prevObject
    var big_title = NaN
    var small_title = NaN
    for (var i = 0; i < big_children.length; i++) {
      if ($(big_children[i]).attr("class") == 'layui-nav-item  layui-nav-itemed') {
        big_title = i
      }
    }
    for (var o = 0; o < samll_children.length; o++) {
      if ($(samll_children[o]).attr("class") == "layui-this") {
        small_title = o
      }
    }
    var a_title = $(this).html()
    href = $(this).attr("name")
    // 要跳转的页面，定义URL
    url = 'http://127.0.0.1:8000/backend/' + href + "/"
    $.ajax({
      //请求方式
      type: "GET",
      //请求的媒体类型
      contentType: "application/json;charset=UTF-8",
      //请求地址
      url: url,
      //数据，json字符串
      data: {
        'a_title': a_title,
        'big_title': big_title,
        'small_title': small_title,
      },
      //请求成功
      success: function (result) {
        // 跳转到下一页
        window.location.href = url + "?a_title=" + a_title + '&big_title=' + big_title + '&small_title=' + small_title;
      },
      //请求失败，包含具体的错误信息
      error: function (e) {
        console.log(e.status);
        console.log(e.responseText);
      }
    })
  })

	// 获取URL 的参数值
    function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
        return pair[1];
      }
    }
    return (false);
  }


  // 分页
  layui.use('laypage', function () {
    var laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render({
      elem: 'demo1' //注意，这里的 test1 是 ID，不用加 # 号
      , count: 50 //数据总数，从服务端得到
    });
  });
</script>

// 跳转页面的js方法
<script src="/static/js/layui.js"></script>
<!--调用分页的js方法-->
<script src="/static/js/laypage.js"></script>
<script src="/static/js/jquery.min.js"></script>
<script>
	// 页面加载完成后执行
  $(document).ready(function () {
  	// 调用 左侧列表js中 “获取URL 的参数值 ”的方法 （直接填写url上的参数名称获取参数值）
    big_title = getQueryVariable("big_title")
    small_title = getQueryVariable("small_title")
    // 点击左侧列表
    // 大标题，展开
    $(".layui-nav-item ").eq(big_title).addClass("layui-nav-itemed");
    // 小标题，添加背景颜色
    $(".layui-nav-child>dd").eq(small_title).addClass("layui-this");
  });


</script>

本文地址：https://blog.csdn.net/mmmmmm__yy/article/details/109261768