前言
原创文章,欢迎转载,请保留出处。
有任何错误、疑问或者建议,欢迎指出。
我的邮箱:Maxwell_nc@163.com
前一篇介绍了如何利用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
下篇准备介绍下制作出漂亮的盒子模块,有错误和问题希望可以回复指出。