jquery实现不刷新改变页面

1、jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
//web项目的根路径，就是webRoot
<c:set var="ctx" value="${pageContext.request.contextPath}" />

js

html() 方法返回或设置被选元素的内容 (inner HTML)。如果该方法未设置参数，则返回被选元素的当前内容。

<script type="text/javascript">

    var rootPath = "${ctx}";

    $(function() {
        //$(A.B)选取所有class有B的A元素,是一个dom集合
        items = $("a.list-group-item");
        //遍历集合
        items.each(function() {
            //this表示当前操作对象，$是将当前dom对象转换成jquery对象 
            //绑定点击事件
            $(this).bind("click", function() {
                for (j = 0; j < items.length; j++) {
                    //$(items[j])：dom元素转换成jquery对象
                    $(items[j]).removeClass("active");
                }
                //$(dom).attr("nav-n"):获取元素的nav-n属性的值
                var nav = $(this).attr("nav-n");
                tbLoad(nav);
                $(this).addClass("active");
            });
        });
        tbLoad("/overview/main.shtml")
    });
    function tbLoad(href){
        var tb = $("#loadhtml");

　　　　　　var html = '<div class="alert alert-warning">'
　　　　　　+ '<button type="button" class="close" data-dismiss="alert">'
　　　　　　+ '<i class="ace-icon fa fa-times"></i></button><div style="text-align:center">'
　　　　　　+ '<img src="' + rootPath + '/images/loading.gif"/><div>'
　　　　　　+ '</div>';

        tb.html(html);
       //load方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。 
       tb.load(rootPath+href); } 
</script>

html

<div class="container-fluid">
        <div class="col-lg-1 bs-docs-sidebar" style="padding-top: 1px;">
            <div class="list-group">
                <a href="#" class="list-group-item" style="text-align: center; " nav-n="aaa.shtml">用户信息</a> 
                <a href="#" class="list-group-item" style="text-align: center; " nav-n="bbb.shtml">账号管理</a> 
            </div>
        </div>
        <section id="content" class="col-lg-11">
            <section id="id_vbox" class="vbox">
                <ul class="breadcrumb no-border no-radius b-b b-light" id="topli"></ul>
                <section class="scrollable" style="margin-top: 20px;">
                    <div id="loadhtml"></div>
                </section>
            </section>
        </section>
    </div>

 

Done