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