前言

關於頁面切換，肯定有很多種方法，我這裡只是記錄我在學習過程中用到的可以用的方法

一、利用jQuery實現

首先利用bootstrap建立一個左側的列表（不清楚bootstrap框架整麼用，可以點選連結菜鳥教程，裡面講解很基礎很詳細）

<!--左側選單欄-->
    <div class="sidebar-nav">
        <ul>
            <li id="li-one" class="active nav-header collapsed" data-toggle="collapse">首頁</li>
 

            <!-- 根據data-target關聯你的子列表 -->
            <li data-target=".premium-menu" data-toggle="collapse" class="nav-header collapsed">列表一</li>
                <li>
                    <ul class="premium-menu nav nav-list collapse">
                        <li id="li-two"
 
>    子列表-</li>
                        <li id="li-three">  子列表二</li>
                        <li id="li-four">   子列表三</li>
                        <li id="li-five">   子列表四</li>
                        <li id="li-six">    子列表五</li>
                        <li
 
 id="li-seven">  子列表六</li>
                    </ul>
                </li>
            <li id="li-eight" class="nav-header collapsed" data-toggle="collapse">列表二</li>
            <li id="li-nine" class="nav-header collapsed" data-toggle="collapse">列表三</li>
            <li id="li-ten" class="nav-header collapsed" data-toggle="collapse">列表四</li>
            <li id="li-eleven" class="nav-header collapsed" data-toggle="collapse">列表五</li>
        </ul>
    </div>

在每個需要點選的 li 裡面，都標有一個id，這是關鍵。然後在body中建立右側主體內容div。

<!--右側主體內容 用bootstrap的content類包含在一起-->
    <div class="content">
        <div id="matter1" >
            <!--引入外部檔案，即需要在右側載入的內容-->
            <jsp:include page="aboutCompany.jsp"/>
        </div>

        <div id="matter2" style="display: none">
            <jsp:include page="collectingBills.jsp"/>
        </div>

        <!--
            ...........中間的都一樣的，只不過載入的檔案不一樣而已
        -->
        <div id="matter10" style="display: none">
            <jsp:include page="salaryAccount.jsp"/>
        </div>

        <div id="matter11" style="display: none">
            <jsp:include page="summaryBills.jsp"/>
        </div>
    </div>

每個內容的div裡面，也有個 id，而且除了第一個div裡沒有style=”display: none”之外，其他都有，是因為我們進入頁面的時候，直接就顯示一個主介面，其他內容只在被觸發時才顯示。這兒有一個右側主體內容的一個示例

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="header">
    <h1 class="page-title">關於公司</h1>
</div>
<div class="main-content">
    <div class="row">
        <div class="col-sm-6 col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading no-collapse text-center" style="font-size: 20px">公司簡介</div>
                <table class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-6 col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading no-collapse text-center" style="font-size: 20px">公司規章制度</div>
                <div class="panel-body">這是內容</div>
            </div>
        </div>
    </div>
</div>

並不需要body、html標籤這些。因為jsp:include page=”xxx.jsp”都是靜態引入，在主介面載入的時候，就會把內容全部載入進去，相當於直接把程式碼放在各個div下面。

現在開始最重要的環節，就是把左側選單和右側主體關聯起來。利用jQuery實現。

<script>
$(document).ready(function() {
    var temp = "none";

    $("#li-one").click(function () {
        openMatter(1);
    });
    $("#li-two").click(function () {
        openMatter(2);
    });
    $("#li-three").click(function () {
        openMatter(3);
    });
    $("#li-four").click(function () {
        openMatter(4);
    });
    $("#li-five").click(function () {
        openMatter(5);
    });
    $("#li-six").click(function () {
        openMatter(6);
    });
    $("#li-seven").click(function () {
        openMatter(7);
    });
    $("#li-eight").click(function () {
        openMatter(8);
    });
    $("#li-nine").click(function () {
        openMatter(9);
    });
    $("#li-ten").click(function () {
        openMatter(10);
    });
    $("#li-eleven").click(function () {
        openMatter(11);
    });
    function openMatter(obj) {
        for (var i = 1; i < 12; i++) {
            if (i == obj) {
                temp = "block";
            } else {
                temp = "none";
            }
            document.getElementById("matter" + i).style.display = temp;

        }
    }
});
</script>

相當於觸發點選事件的時候，修改各個div的display屬性進行顯示和隱藏。主要的是，每個數字必須連續，也就是假若你沒有id=”matter10”這個div而直接就是id=”matter11”，那麼切換效果就沒有了，所以matter後面的數字必須連續。這樣感覺有點繁瑣，但又可以用。

還是貼一個效果圖吧

二、SpringMVC控制切換

主要是把主介面中重要部分提取到各個子檔案中去。看一下檔案列表截圖

先來瀏覽一下各個配置檔案。
1.FileList.jsp檔案：主要就是寫一下連結，也不需要body等標籤

2.topNav.jsp檔案:頭部導航欄檔案

3.LeftList.jsp檔案：左側導航欄樣式，就是把上一個方法的內容轉移陣地

4.各個部分的主體內容：eg：Main.jsp。右側其他主體內容也類似

好了，每個部分都弄完了。現在每個div裡面都是沒有id的，就是有左側選單欄截圖中，有每個 li 的 a 連結，用於訪問後臺。下面就要預備跳轉了。下面是SpringMVC控制層的編寫截圖

這就完成了跳轉功能。最後看一下效果圖

這種方法就是真正的頁面之間的跳轉，而不是第一種方法那樣就在一個頁面中實現；還有就是這種方法jsp介面內容比較少，因為把各個內容都分配到了子檔案中去，每個檔案都只顯示自己的內容，並不需要載入其他模組的內容，這個可以在瀏覽器上右鍵檢視原始碼進行對比。

以上只是我在學習過程中的一些筆記，因為學習新知識的同時可能有更好的方法代替現在的方法，我就先記錄下來了。文章內容比較繁瑣，還請見諒。