用Jquery.load載入頁面實現(xiàn)局部刷新
更新時間：2014年01月22日 17:21:51 作者：
用jquery.load的方法載入新的頁面，以實現(xiàn)局部刷新，可結果發(fā)現(xiàn)載入進來的頁面與原來單獨的頁面不一樣，樣式?jīng)]了，關于這個問題，下面有個不錯的解決方法
因為開始不懂Jquery，一直想用jquery.load的方法載入新的頁面，以實現(xiàn)局部刷新，結果發(fā)現(xiàn)載入進來的頁面與原來單獨的頁面不一樣，樣式?jīng)]了，后來在網(wǎng)上查了一下，發(fā)現(xiàn)了解決辦法，這是別人的回答：
是這樣的，如果不過濾掉一些內(nèi)容的話，直接加載，會使頁面混亂的，比如新的頁面也存在<body>標簽，加載進來后，一個頁面就會存在兩個<body>標簽是不規(guī)范的的HTML。這個是在jquery.load()函數(shù)中規(guī)定的。一般加載進來的頁面需要自己根據(jù)加載的內(nèi)容的元素重新定義CSS樣式和添加js事件的。比如：
原頁面A.html：
<html>
<head><title></title></head>
<body>
<div id="container"></div>
</body></html>
被load的頁面B.html：
<html>
<head><title></title></head>
<style>.page-li {font-size:12px;color:blue}</style>
<body>
<div id="page">
<ol class="page-li">
<li>234123</li><li>341234</li><li>41234</li><li>412de34</li>
</ol>
</div>
</body></html>
在原頁面A.html中加載調(diào)用的jquery.load()，然后再在原頁面對 page-li 的樣式重新定義下就可以了：
添加了load(),css的原頁面：
<html>
<head><title></title></head>
<style>.page-li {font-size:12px;color:green}</style>
<body>
<div id="container"></div>
<script type="text/javascript">
$(function(){
$("#container").load("B.html #page",null,function(){alert("加載成功")});
});
</script>
</body></html>
希望對你有幫助
是這樣的，如果不過濾掉一些內(nèi)容的話，直接加載，會使頁面混亂的，比如新的頁面也存在<body>標簽，加載進來后，一個頁面就會存在兩個<body>標簽是不規(guī)范的的HTML。這個是在jquery.load()函數(shù)中規(guī)定的。一般加載進來的頁面需要自己根據(jù)加載的內(nèi)容的元素重新定義CSS樣式和添加js事件的。比如：
原頁面A.html：
復制代碼 代碼如下:
<html>
<head><title></title></head>
<body>
<div id="container"></div>
</body></html>
被load的頁面B.html：
<html>
<head><title></title></head>
<style>.page-li {font-size:12px;color:blue}</style>
<body>
<div id="page">
<ol class="page-li">
<li>234123</li><li>341234</li><li>41234</li><li>412de34</li>
</ol>
</div>
</body></html>
在原頁面A.html中加載調(diào)用的jquery.load()，然后再在原頁面對 page-li 的樣式重新定義下就可以了：
添加了load(),css的原頁面：
<html>
<head><title></title></head>
<style>.page-li {font-size:12px;color:green}</style>
<body>
<div id="container"></div>
<script type="text/javascript">
$(function(){
$("#container").load("B.html #page",null,function(){alert("加載成功")});
});
</script>
</body></html>
希望對你有幫助
您可能感興趣的文章:
- jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理
- jquery使用iscorll實現(xiàn)上拉、下拉加載刷新
- JQuery插件iScroll實現(xiàn)下拉刷新，滾動翻頁特效
- jQuery+AJAX實現(xiàn)無刷新下拉加載更多
- jquery ajax實現(xiàn)下拉框三級無刷新聯(lián)動,且保存保持選中值狀態(tài)
- 用Jquery實現(xiàn)多級下拉框無刷新的聯(lián)動
- 基于jQuery Ajax實現(xiàn)下拉框無刷新聯(lián)動
- jQuery 翻頁組件yunm.pager.js實現(xiàn)div局部刷新的思路
- jquery刷新頁面的實現(xiàn)代碼（局部及全頁面刷新）
- jQuery實現(xiàn)AJAX定時刷新局部頁面實例
- JQuery+Ajax無刷新分頁的實例代碼
- jQuery實現(xiàn)的上拉刷新功能組件示例
相關文章
這篇文章主要為大家詳細介紹了jQuery表單設置值的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
基于jquery實現(xiàn)的可編輯下拉框?qū)崿F(xiàn)代碼
昨天看到QQ登錄的時候，可以選擇以前登錄過的賬戶，這個東西也可以在網(wǎng)站登錄的時候用到，所以我就想做一個這樣的插件；在網(wǎng)上查了很多，沒有找到合適自己的，所以決定自動制作一個2014-08-08
前些陣子寫了個插件目的就是能夠像.net 的 Requst.QuerySting["param"]那樣獲取地址欄參數(shù)?，F(xiàn)在拿出來和大家分享。感覺這個插件還是蠻有用的。2010-10-10
fancybox1.3.1 基于Jquery的插件在IE中圖片顯示問題
JQuery的彈出窗口插件也很多了，例如Lightbox…這個我們介紹比較優(yōu)秀的Plugin – Fancybox。2010-10-10
jQuery EasyUI tree增加搜索功能的實現(xiàn)方法
擴展jQuery EasyUI tree搜索樹節(jié)點的方法，使其支持節(jié)點名稱的模糊匹配，將不匹配的節(jié)點隱藏。下面通過本文給大家分享jQuery EasyUI tree增加搜索功能,需要的朋友可以參考下2017-04-04
jQueryMobile之Helloworld與頁面切換的方法
這篇文章主要介紹了jQueryMobile之Helloworld與頁面切換的方法,實例分析了jQueryMobile的基礎用法,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
jQuery EasyUI API 中文文檔 - Form表單
jQuery EasyUI API 中文文檔 - Form表單,使用jQuery EasyUI的朋友可以參考下。2011-10-10
這篇文章主要介紹了jquery實現(xiàn)彈出窗口效果的實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
jquery 動態(tài)合并單元格的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨query 動態(tài)合并單元格的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要為大家詳細介紹了jquery zTree異步加載、模糊搜索簡單實例，感興趣的小伙伴們可以參考一下2016-03-03