DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 用Jquery.load載入頁面後樣式沒了頁面混亂的解決方法
用Jquery.load載入頁面後樣式沒了頁面混亂的解決方法
編輯:JQuery特效代碼     

因為開始不懂Jquery,一直想用jquery.load的方法載入新的頁面,以實現局部刷新,結果發現載入進來的頁面與原來單獨的頁面不一樣,樣式沒了,後來在網上查了一下,發現了解決辦法,這是別人的回答:

是這樣的,如果不過濾掉一些內容的話,直接加載,會使頁面混亂的,比如新的頁面也存在<body>標簽,加載進來後,一個頁面就會存在兩個<body>標簽是不規范的的HTML。這個是在jquery.load()函數中規定的。一般加載進來的頁面需要自己根據加載的內容的元素重新定義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>

希望對你有幫助

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved