web实现点击左侧导航,右侧加载不同的网页(这种布局多用于后台管理系统)
(1)实现方法:采用ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可)
(2)原理:ajax的局部刷新原理:通过.load()重新加载页面中的某一部分,巧妙的借助data-*的自定义属性来存储数据,点击的时候修改锚点,因为地址有变,所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个。
(3)适用场景:遇到ajax局部刷新的需求也有很多,有时候比较简单,当内容较少,适合做成选项卡;如果网页的左侧有一个列表,点击列表使右侧的内容进行切换,如果右侧的内容过多,不适合做选项卡,这时候用.load()局部刷新最好不过了,在项目中经常使用到流程管理后台,便是左右结构布局,这个时候,简单的demo示例如下
<!DOCTYPE html>
<html lang="en">
<head>
<title>ajax局部刷新</title>
<style>
.userMenu {
float: left;
width: 200px;
}
#content {
float: left;
}
</style>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="userWrap">
<ul class="userMenu">
<li class="current" data-id="center">用户中心</li>
<li data-id="account">账户信息</li>
<li data-id="trade">交易记录</li>
<li data-id="info">消息中心</li>
</ul>
<div id="content"></div>
</div>
</body>
<script>
$(function() {
$(".userMenu").on("click", "li", function() {
var sId = $(this).data("id"); //获取data-id的值
window.location.hash = sId; //设置锚点
loadInner(sId);
}); function loadInner(sId) {
var sId = window.location.hash;
var pathn, i;
switch(sId) {
case "#center":
pathn = "user_center.html";
i = 0;
break;
case "#account":
pathn = "user_account.html";
i = 1;
break;
case "#trade":
pathn = "user_trade.html";
i = 2;
break;
case "#info":
pathn = "user_info.html";
i = 3;
break;
default:
pathn = "user_center.html";
i = 0;
break;
}
$("#content").load(pathn); //加载相对应的内容
$(".userMenu li").eq(i).addClass("current").siblings().removeClass("current"); //当前列表高亮
}
var sId = window.location.hash;
loadInner(sId);
});
</script>
</html>
创建右侧对应的几个新的html页面user_center.html,user_account.html,user_trade.html,user_info.html
user_center.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
用户中心
用户中心
用户中心
</div>
</body>
</html>
user_account.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
账户信息
账户信息
账户信息
</div>
</body>
</html>
user_trade.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
交易中心
交易中心
交易中心
</div>
</body>
</html>
user_info.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
消息中心
消息中心
消息中心
</div>
</body>
</html>
web实现点击左侧导航,右侧加载不同的网页(这种布局多用于后台管理系统)的更多相关文章
- ajax实现简单的点击左侧菜单,右侧加载不同网页
实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 原理:ajax的 ...
- Android 8.1 SystemUI虚拟导航键加载流程解析
需求 基于MTK 8.1平台定制导航栏部分,在左边增加音量减,右边增加音量加 思路 需求开始做之前,一定要研读SystemUI Navigation模块的代码流程!!!不要直接去网上copy别人改的需 ...
- web.xml之context-param,listener,filter,servlet加载顺序及其周边
先以加载spring为例子看看加载顺序的作用: Spring加载可以利用ServletContextListener 实现,也可以采用load-on-startup Servlet 实现,但比如fil ...
- web.xml的contextConfigLocation作用及自动加载applicationContext.xml
web.xml的contextConfigLocation作用及自动加载applicationContext.xml 转自:http://blog.csdn.net/sapphire_aling/ar ...
- web应用启动的时候SpringMVC容器加载过程
<!-- 配置DispatcherServlet --> <servlet> <servlet-name>springmvc</servlet-name> ...
- java调用phantomjs采集ajax加载生成的网页
java调用phantomjs采集ajax加载生成的网页 日前有采集需求,当我把所有的对应页面的链接都拿到手,准备开始根据链接去采集(写爬虫爬取)对应的终端页的时候,发觉用程序获取到的数据根本没有对应 ...
- 如何使用 require.js ,实现js文件的异步加载,避免网页失去响应,管理模块之间的依赖性,便于代码的编写和维护。
一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
- [转]layui点击左侧导航栏,实现不刷新整个页面,只刷新局部
本文转自:https://blog.csdn.net/s31415926_004/article/details/84256587 其实这篇文章是给自己看的,以后忘记怎么做回来还能看一下哈哈哈哈哈哈哈 ...
- 玩转Web之easyui(二)-----easy ui 异步加载生成树节点(Tree),点击树生成tab(选项卡)
关于easy ui 异步加载生成树及点击树生成选项卡,这里直接给出代码,重点部分代码中均有注释 前台: $('#tree').tree({ url: '../servlet/School_Tree?i ...
随机推荐
- Flex AIR应用GPS定位功能(Android和IOS)
说明: 使用AIR进行GPS定位功能实现时,会经常判断GPS是否打开.一般的官方或者书上的介绍的方法,测试后,只能对Android系统进行判断,而对ios系统则无法进行判断. 经过研究测试,终于解决实 ...
- scrapdy部署爬虫项目
原文:https://blog.csdn.net/JLaiRen/article/details/82902321 scrapyd安装 打开命令行工具输入命令:pip install scrapyd ...
- DIRECTORY_SEPARATOR 与 getcwd
DIRECTORY_SEPARATOR:目录分隔符,linux上就是’/’ windows上是’\’ ,php的内置常量是一个显示系统分隔符的命令,php的内部常量,不需要任何定义与包含即可直接 ...
- Java中try catch finally执行
直接上代码实例: public static void main(String[] args) { System.out.println(test1()); } static int test1 ...
- H3C查看保存的配置文件
- If条件语句实战
1.If条件判断语句 通常以if开头,fi结尾.也可加入else或者elif进行多条件的判断,if表达式如下: if (表达式) 语句1 else 语句2 fi 2.If常见判断逻辑运算符详解: -f ...
- CP防火墙配置NAT
Static NAT配置 Step1:创建host对象并且配置static NAT,如下图: Step2:修改全局属性的NAT项的ARP代理选项,勾选即可,如下图: Step3:在网关的web por ...
- Strongly Connected Tournament
题解: 有一个很重要的性质就是 对于一张完全强联通图来说 一定有一个强联通分量入度为0(或者出度为0) 然后就一些计数题的基本套路 https://www.cnblogs.com/onioncyc/p ...
- Hibernate各种查询方式及查询策略(转)
转自:https://www.cnblogs.com/xujingyang/p/6734203.html 在了解Hibernate的基本知识后,重点让我们看下相关查询方式和查询优化策略吧! 话不多说, ...
- java xml的读取与写入(dom)
首先,先获取到文档对象 private static Document getDocument(String path) { //1.创建DocumentBuilderFactory对象 Docume ...