HTML頁面左側選單欄切換實現右側主體內容改變
前言
關於頁面切換,肯定有很多種方法,我這裡只是記錄我在學習過程中用到的可以用的方法
一、利用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介面內容比較少,因為把各個內容都分配到了子檔案中去,每個檔案都只顯示自己的內容,並不需要載入其他模組的內容,這個可以在瀏覽器上右鍵檢視原始碼進行對比。
以上只是我在學習過程中的一些筆記,因為學習新知識的同時可能有更好的方法代替現在的方法,我就先記錄下來了。文章內容比較繁瑣,還請見諒。