Online Demo: http://demo.jb51.net/js/JQueryload/index.htm
All code
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> JQuery-Load </title>
<Link rel = "stylesheet" media = "all" type = "text/css" href = "../CSS/myStyle.css"/>
<Script type = "text/javascript" src = "http://demo.jb51.net/jslib/jquery/jquery-1.3.2.min.js"> </script>
<Style type = "text/css">
# Header {
Margin-bottom: 1em;
Padding-bottom: 1em;
Border-bottom: 1px solid # eee;
}
. ButtonListArea {
Float: left;
Width: 150px;
Padding-right: 10px;
Border-right: 1px solid # eee;
Margin-right: 10px;
}
. ButtonArea {
Margin: 10px;
Padding-bottom: 20px;
}
# Load_content {
Float: left;
Width: 550px;
Text-align: center;
}
</Style>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('# BtnLoad1.button'). click (function (){
('Upload_content'uplo.load('loadcontent1.htm ');
});
$ ('# BtnLoad2.button'). click (function (){
('Upload_content'uplo.load('loadcontent2.htm ');
});
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div id = "container">
<Div id = "header">
<H2> JQuery Load Example </Div>
<Div class = "buttonListArea">
<Div class = "buttonArea">
<Div class = "button" id = "btnLoad1"> Load 1 </div>
</Div>
<Div class = "buttonArea">
<Div class = "button" id = "btnLoad2"> Load 2 </div>
</Div>
</Div>
<Div id = "load_content">
<H2> This is the region to be loaded </Div>
</Div>
</Form>
</Body>
</Html>
LoadContent1.htm
Copy codeThe Code is as follows:
Jb51.net
LoadContent2.htm
Copy codeThe Code is as follows:
SC .jb51.net
Package and download code