页面局部刷新（左侧菜单变化，右边div内容变化）

最新推荐文章于 2021-09-16 16:08:40 发布

washli2001

最新推荐文章于 2021-09-16 16:08:40 发布

阅读量2.1w

点赞数 2

分类专栏：页面局部刷新

本文链接：https://blog.csdn.net/washli2001/article/details/8891061

版权

页面局部刷新专栏收录该内容

3 篇文章 0 订阅

订阅专栏

页面局部刷新

jquery load

一：全局页面：menu.html(jsp)

1. 引入js

<scripttype="text/javascript"src="js/jquery.js"></script>

history历史记录插件可以帮助您回到您的JavaScript支持应用程序/前进按钮和书签。你可以存储到应用程序状态的网址散列和恢复它的状态。
详细出处参考：http://www.jb51.net/article/25598.htm

2. 全局页面定义一个div

3. 菜单

<ahref="#myinfo"rel="history">我的信息</a>

<ahref="#myinfo2"rel="history">修改密码</a>

注： a 标签要加rel="history"属性

完整的菜单加内容如下：

4. 增加绑定函数

$(document).ready(function(){

$('a').bind('click',function(e){

var currentHistory = $(this).attr("href");

currentHistory =currentHistory.replace("#",''); //去掉#号

$.history.load(currentHistory);

console.log(["form click ", currentHistory]);

e.preventDefault();

});

4.javascript增加函数

function load(url) {

if (url=="myinfo")

$("#content").load('http://127.0.0.1/myproject/myinfo.jsp');

else if (url=="myinfo2")

$("#content").load('http://127.0.0.1/myproject/myinfo2.jsp');

else

$("#content").load('http://127.0.0.1/myproject/myinfo3.jsp');

上面循环可以用下面一句代替

$("#content").load(url+'.html');

}

$.history.init(function(url) {

if(url){

load(url);

}

});

二．加载子页面:myinfo.html

页面除了必要的信息外只需写要添加到div内的内容

<!DOCTYPEhtmlPUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<linkhref="css/style.css"rel="stylesheet"type="text/css"/>

</head>

<ulclass="l_tab_cright">

myinfo1111111111111

</ul>

</html>

到这里就实现了页面局部刷新，回退前进都可以。

但是有个问题，menu.html 中菜单如果点击有样式，失去样式消失，

$(function(){
var tabTitle = ".l_tab_title a";
var tabContent = ".l_tab_cright";
$(tabTitle + ":first").addClass("on");
$(tabContent).not(":first").hide();
$(tabTitle).unbind("click").bind("click", function(){
$(this).siblings("a").removeClass("on").end().addClass("on");
var index = $(tabTitle).index( $(this) );
$(tabContent).eq(index).siblings(tabContent).hide().end().fadeIn(0);
});
});

这样就引起回退和前进的时候菜单不会回头和前进。

就要做如下处理。

修改load函数：

washli2001

关注

2
点赞
踩
25

收藏

觉得还不错? 一键收藏
2
评论
页面局部刷新（左侧菜单变化，右边div内容变化）

页面局部刷新jquery load一：全局页面：menu.html(jsp)1. 引入jsscripttype="text/javascript"src="js/jquery.js">script>script type="text/javascript" src="js/jquery.history.js">script>history历史记录插件可以帮
复制链接

扫一扫

专栏目录