基於Bootstrap3製作響應式佈局網站（四）

前言

原創文章，歡迎轉載，請保留出處。
有任何錯誤、疑問或者建議，歡迎指出。
我的郵箱:[email protected]

前一篇介紹瞭如何利用Bootstrap3製作響應式的導航欄，本篇簡單地介紹如何實現導航欄跳轉。當然這個跳轉並非簡單的a標籤加上herf屬性，而是實現一種不用刷新整個頁面的跳轉。

---

側邊導航欄實現跳轉

這裏我主要以側邊欄爲例子講解，同樣適用於頂部導航欄。

加入鏈接

緊接着上篇的導航欄代碼中，在A標籤裏面加上兩個屬性，其中href使用一個錨標記（後面用到的DIV的ID），另外加上一個data-toggle屬性（後面用於實現跳轉的一個標記），如下圖：

<ul id="myTab" class="nav nav-sidebar">
    <li class="active"><a href="#home" data-toggle="tab">主頁 <span class="sr-only">(current)</span></a></li>
    <li><a href="#box" data-toggle="tab">盒子演示</a></li>
    <li><a href="#calendar" data-toggle="tab">日曆演示</a></li>
    <li><a href="#form" data-toggle="tab">表單演示</a></li>
</ul>

利用jsp特性引入頁面

這裏是實現的核心，把多個頁面引入和主頁面一起送給servlet編譯給前端，缺點是當頁面很多時會導致載入過慢。

<!-- box頁面 -->
<div class="tab-pane fade" id="box">
    <%@ include file="box.jsp"%>
</div>

這裏代碼的id就是上面a標籤使用的錨標記，而class是Bootstrap的特性，如果class中帶有in active，那麼他就會激活顯示。所以我們需要自己寫一段js代碼當點擊這些導航按鈕時，修改對應的div的class屬性。

js激活的代碼

我們寫在之前我們引入的index.js文件中，代碼比較簡單，不需要解析：

/*響應標籤頁切換*/
$('#myTab a').click(function(e) {
    e.preventDefault()
    $(this).tab('show')
})

以上實現後就可以實現跳轉了，不過另外的頁面如何兼容原來的網站框架呢？
我們要給新的頁面一個框架和CSS代碼才行。

新頁面的框架和CSS

這裏以其中一個頁面爲例子：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!-- calendar的風格文件 -->
<link rel="stylesheet"
    href="${pageContext.request.contextPath}/my/css/calendar.css">


<div class="container">
    <!-- 頁面的內容 -->
</div>

添加CSS文件

@CHARSET "UTF-8";

/* 這裏是當瀏覽器寬度最大不超過767px時應用的效果 */
@media screen and (max-width: 767px) {
    .calendar_contain {
        padding-right: 40px;
        padding-left: 00px;
    }
}

效果如下圖：

---

後記

源碼下載（已經包含本篇的所有源碼）：
http://download.csdn.net/detail/maxwell_nc/8727873

下篇準備介紹下製作出漂亮的盒子模塊，有錯誤和問題希望可以回覆指出。