js 修改 url 但不刷新页面

 

示例页面

<%@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

 

posted @ 2021-06-04 17:11  Li&Fan  阅读(1565)  评论(0)  编辑  收藏  举报