示例页面
<%@page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% //先获取初始url 的参数值 String item = request.getParameter("item"); %> <!DOCTYPE html> <html lang="zh"> <head> <title>#Title#</title> <!--表格控件--> <script src="common/js/jquery-3.2.1.min.js"></script> <script src="common/js/jquery.cookie.js"></script> <script src="common/js/bootstrap.min.js"></script> <!--layuiz遮罩层--> <script src="layui/layui.all.js"></script> <script src="layui/css/layui.css"></script> <link href="common/css/bootstrap-table.min.css" rel="stylesheet" /> <script src="common/js/bootstrap-table.min.js"></script> <script src="common/js/bootstrap-table-zh-CN.min2.js"></script> <script type="text/javascript">var item = "<%=item %>"</script> </head> <body> <div id="container"> <iframe class="customHeader_iframe" scrolling="no" src="https://#############"></iframe> <div class="banner"> <div class="new-common-content"> <h3 class="banner-tit">页面标题</h3> </div> </div> <div id="main" class="new-common-content contentBox"> <div class="filter clearfix"> <div id="first" class="pull-left"> <div class="type pull-left active">类型：</div> <ul id = "ul1" class="filter-list pull-left"> <li class="filter-item1 " value = "1" id= "1">标签一</li> <li class="filter-item1 " value = "2" id= "2">标签二</li> </ul> </div> </div> </div> <iframe class="customFooter_iframe" scrolling="no" src="https://##############" frameborder="0"></iframe> </div> </body> </html> <script> //初始url 后面的参数 item 等于几就给哪个li标签设为选中状态； $(function () { $("#ul1 li").removeClass("active"); $("#"+item).addClass("active"); }); $(".filter-item1").click(function(){ $("#ul1 li").removeClass("active"); $(this).addClass("active"); //动态 改变 url var stateObject = {}; var title = "Wow Title"; var fwjg = $("#ul1 .active").val();//获取选中标签的值 var newUrl = "/项目名/*****.jsp?item="+fwjg;//替换 域名或ip 之后的地址 history.pushState(stateObject,title,newUrl); //前两个参数可以为空 }); </script>
结果 样例：
初始访问页面地址：
https://localhost:8080/demo/hello.jsp?item=1
页面会 默认选中 标签一
当点击 标签二 时，页面不刷新，url 会改为 ：
https://localhost:8080/demo/hello.jsp?item=2