ajax实现简单的点击左侧菜单，右侧加载不同网页

实现：ajax实现点击左侧菜单，右侧加载不同网页（在整个页面无刷新的情况下实现右侧局部刷新，用到ajax注意需要在服务器环境下运行，从HBuilder自带的服务器中打开浏览效果即可）

图片.png

原理：ajax的局部刷新原理：通过.load()重新加载页面中的某一部分，巧妙的借助data-*的自定义属性来存储数据，点击的时候修改锚点，因为地址有变，所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个。

遇到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>

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知

转载于:https://www.cnblogs.com/ting6/p/9725528.html

ajax实现简单的点击左侧菜单，右侧加载不同网页相关推荐

html点击左侧菜单右侧顶部生成选项卡,标签在左侧的CSS竖向简洁选项卡
标签在左侧的CSS竖向简洁选项卡 body{padding:50px;margin:0;color:#666;font:12px arial,sans-serif;} #getId{width:400 ...
php怎么写左侧菜单右侧内容,ifram 实现左侧菜单，右侧显示内容
一般都是左侧的导航栏中的a标签中写一个target(a标签有target属性), 右侧的div标签中写一个iframe,在iframe中有name的属性,在左侧a标签中的target写上iframe中 ...
chrome 自动加载ajax.googleapis,使用Redirector插件解决googleapis公共库加载的问题
最近访问一些面向国外的网站总是会出现ajax.googleaips.com无法加载的情况.以下为加载stackoverflow时的情境: 图1 -无法加载的google公共库问题的原因是谷歌没有在国 ...
selenium爬取Ajax加载的网页（以微博为例）
Tip:我写了一篇直接构造请求获取微博数据的文章,不使用selenium,直接访问url获取到json数据,然后解析即可得到想要的数据的文章,请参考微博博主动态及相册的请求构造规律 ========= ...
Android之解决webview加载第三方网页点击弹不出下拉框（html页面里面的select标签）
1 问题决webview加载第三方网页点击弹不出下拉框(html页面里面的select标签),我们访问youtube.com官网,点击网站的视频,点击视频右上角三个点设置,然后点击播放设置然后点 ...
MJ“点击或上拉加载更多”问题
MJ作为下拉加载和上拉刷新的三方库,特别好用.最近在用的时候发现网上有说MJ"点击或上拉加载更多"有bug,什么情况呢? 下拉加载更多 self.collectionView.mj ...
uniapp中实现每次点击左侧菜单右边区域都从顶部开始
使用scroll-view容器,借助滚动事件捕获当前距离顶部距离,然后给scroll-top重新设置为0实现滚动 <scroll-view class="right" scr ...
Dwz点击左侧菜单动态添加Tab标签图标
此篇文章是基于ztree实现,若是dwz与ztree未整合,请先按照<DWZ和zTree整合(实现版)>文章整合. 需求描述: 点击左侧树形菜单(target=navTab)时,在左侧Ta ...
vue结合Element UI如何实现点击左侧菜单的折叠与展开
一.Element UI 中菜单的折叠与展开在Element UI中的官方文档中,在NavMenu 导航菜单中,在Menu Attribute 中,有一个 collapse 属性.它的作用是是否水平 ...