示例頁面
<%@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