Because I didn't understand Jquery at first, I always wanted to use jquery. load Method to load a new page, to achieve partial refresh, The results found that the loaded page is different from the original separate page, the style is gone, and then checked on the internet, the solution was found, which was answered by others:
Yes. If some content is not filtered out, loading it directly will make the page messy. For example, a new page also has a <body> tag. After loading it, two <body> tags on a page are nonstandard HTML. This is specified in the jquery. load () function. Generally, you need to redefine the CSS style and add js events based on the elements of the loaded content. For example:
Source Page a.html:
Copy codeThe Code is as follows:
<Html>
<Head> <title> <Body>
<Div id = "container"> </div>
</Body> Page B .html:
<Html>
<Head> <title> <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>
Load the called jquery. load () in the.html of the original page, and then redefine the page-li style on the original page:
Added load (), css's original page:
<Html>
<Head> <title> <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 ("loaded successfully ")});
});
</Script>
</Body>
Hope to help you