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