用Jquery.load載入頁面后樣式?jīng)]了頁面混亂的解決方法
更新時(shí)間：2014年10月20日 17:30:26 投稿：whsnow
一直想用jquery.load的方法載入新的頁面，以實(shí)現(xiàn)局部刷新，結(jié)果發(fā)現(xiàn)樣式?jīng)]了，后來發(fā)現(xiàn)了解決方法，如果不過濾掉一些內(nèi)容的話，直接加載，會(huì)使頁面混亂的
因?yàn)殚_始不懂Jquery，一直想用jquery.load的方法載入新的頁面，以實(shí)現(xiàn)局部刷新，結(jié)果發(fā)現(xiàn)載入進(jìn)來的頁面與原來單獨(dú)的頁面不一樣，樣式?jīng)]了，后來在網(wǎng)上查了一下，發(fā)現(xiàn)了解決辦法，這是別人的回答：
是這樣的，如果不過濾掉一些內(nèi)容的話，直接加載，會(huì)使頁面混亂的，比如新的頁面也存在<body>標(biāo)簽，加載進(jìn)來后，一個(gè)頁面就會(huì)存在兩個(gè)<body>標(biāo)簽是不規(guī)范的的HTML。這個(gè)是在jquery.load()函數(shù)中規(guī)定的。一般加載進(jìn)來的頁面需要自己根據(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()，然后再在原頁面對(duì) 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>
希望對(duì)你有幫助
相關(guān)文章
這篇文章主要介紹了JQuery插入DOM節(jié)點(diǎn)的方法,實(shí)例分析了jQuery實(shí)現(xiàn)DOM結(jié)點(diǎn)插入所涉及的常見函數(shù)使用技巧,需要的朋友可以參考下2015-06-06
之前，我們減少字節(jié)數(shù)和請(qǐng)求次數(shù)以及加載順序以使頁面加載的更快。如今，我們?cè)絹碓蕉嗟淖⒁獾搅硪粋€(gè)影響網(wǎng)站性能的部分--CPU利用率。使用 jQuery和其他JavaScript框架，使節(jié)點(diǎn)選擇和DOM操作變得越來越容易，如果使用不當(dāng)，有可能影響整個(gè)網(wǎng)頁的響應(yīng)速度。2016-06-06
jQuery學(xué)習(xí)筆記之jQuery的動(dòng)畫
jQuery學(xué)習(xí)筆記之jQuery的動(dòng)畫，需要的朋友可以參考下。2010-12-12
這篇文章主要介紹了jQuery中slideUp()方法用法,以實(shí)例形式分析了slideUp()方法的功能、定義及具體使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理
很多App中,新聞或者展示類都存在下拉刷新和上拉加載的效果，如何實(shí)現(xiàn)上拉刷新下拉加載更多頁面的呢？下面小編通過下面內(nèi)容給大家介紹jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理，需要的朋友可以參考下2015-08-08
下面代碼可以把一個(gè)頁面容器中的表單元素封裝成一個(gè)json對(duì)象2013-11-11
Jquery+AJAX實(shí)現(xiàn)無刷新上傳并重命名文件操作示例【PHP后臺(tái)接收】
這篇文章主要介紹了Jquery+AJAX實(shí)現(xiàn)無刷新上傳并重命名文件操作,結(jié)合實(shí)例形式分析了jQuery+ajax前臺(tái)上傳文件與PHP后臺(tái)接收處理相關(guān)操作技巧,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了JQuery ztree帶篩選、異步加載實(shí)例，zTree支持靜態(tài) 和 Ajax 異步加載節(jié)點(diǎn)數(shù)據(jù)，并支持極其靈活的checkbox或radio選擇功能，本文為大家進(jìn)行具體介紹2016-02-02
基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名唯一性實(shí)例代碼
本文分為jsp代碼和后臺(tái)代碼給大家介紹了基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名唯一性，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-06-06
Jquery 過濾器(first,last,not,even,odd)的使用
Jquery 過濾器，顧名思義就是過濾一些不需要的元素，主要有first,last,not,even,odd等等，下面有個(gè)使用示例，大家可以感受下2014-01-01