用Jquery.load載入頁(yè)面后樣式?jīng)]了頁(yè)面混亂的解決方法
因?yàn)殚_(kāi)始不懂Jquery,一直想用jquery.load的方法載入新的頁(yè)面,以實(shí)現(xiàn)局部刷新,結(jié)果發(fā)現(xiàn)載入進(jìn)來(lái)的頁(yè)面與原來(lái)單獨(dú)的頁(yè)面不一樣,樣式?jīng)]了,后來(lái)在網(wǎng)上查了一下,發(fā)現(xiàn)了解決辦法,這是別人的回答:
是這樣的,如果不過(guò)濾掉一些內(nèi)容的話,直接加載,會(huì)使頁(yè)面混亂的,比如新的頁(yè)面也存在<body>標(biāo)簽,加載進(jìn)來(lái)后,一個(gè)頁(yè)面就會(huì)存在兩個(gè)<body>標(biāo)簽是不規(guī)范的的HTML。這個(gè)是在jquery.load()函數(shù)中規(guī)定的。一般加載進(jìn)來(lái)的頁(yè)面需要自己根據(jù)加載的內(nèi)容的元素重新定義CSS樣式和添加js事件的。比如:
原頁(yè)面A.html:
<html> <head><title></title></head> <body> <div id="container"></div> </body></html> 被load的頁(yè)面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>
在原頁(yè)面A.html中加載調(diào)用的jquery.load(),然后再在原頁(yè)面對(duì) page-li 的樣式重新定義下就可以了:
添加了load(),css的原頁(yè)面:
<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)文章
33個(gè)優(yōu)秀的 jQuery 圖片展示插件分享
這篇文章收集了33個(gè)優(yōu)秀的 jQuery 圖片插件分享給大家。2012-03-03jQuery框架實(shí)現(xiàn)元素顯示及隱藏三種動(dòng)畫(huà)方式
在jQuery框架中對(duì)元素對(duì)象進(jìn)行顯示和隱藏有三種方式,分別是“默認(rèn)方式顯示和隱藏”、“滑動(dòng)方式顯示和隱藏”、“淡入淡出顯示和隱藏”,今天就每種方式通過(guò)實(shí)例代碼給大家詳細(xì)講解,需要的朋友參考下吧2021-06-06jquery 插件之仿“卓越亞馬遜”首頁(yè)彈出菜單效果
用jquery實(shí)現(xiàn)的彈出菜單插件2008-12-12jquery 實(shí)現(xiàn)的改變顏色與背景的代碼 change(fontsize,background)補(bǔ)充2
change事件會(huì)在元素失去焦點(diǎn)的時(shí)候觸發(fā),也會(huì)當(dāng)其值在獲得焦點(diǎn)后改變時(shí)觸發(fā)。2010-05-05修改好的jquery滾動(dòng)字幕效果實(shí)現(xiàn)代碼
修改好的jquery滾動(dòng)字幕效果,需要的朋友可以參考下。2011-06-06jQuery實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)效果的方法,涉及jQuery操作隨機(jī)數(shù)及頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2015-05-05通過(guò)Ajax使用FormData對(duì)象無(wú)刷新上傳文件方法
這篇文章主要介紹了通過(guò)Ajax使用FormData對(duì)象無(wú)刷新上傳文件方法,具有一定的參考價(jià)值,感興趣的朋友可以了解一下。2016-12-12javascript與jquery中跳出循環(huán)的區(qū)別總結(jié)
本文是對(duì)javascript與jquery中跳出循環(huán)的區(qū)別進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11Jquery給當(dāng)前頁(yè)或者跳轉(zhuǎn)后頁(yè)面的導(dǎo)航欄添加選中后樣式的實(shí)例
下面小編就為大家?guī)?lái)一篇Jquery給當(dāng)前頁(yè)或者跳轉(zhuǎn)后頁(yè)面的導(dǎo)航欄添加選中后樣式的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12jQuery實(shí)現(xiàn)灰藍(lán)風(fēng)格標(biāo)準(zhǔn)二級(jí)下拉菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)灰藍(lán)風(fēng)格標(biāo)準(zhǔn)二級(jí)下拉菜單效果代碼,涉及jquery鼠標(biāo)mouseover事件控制頁(yè)面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08