您的位置：首页 > Web前端 > JQuery

【HTML/JS】利用JQuery的load函数动态加载其它页面的内容的实现代码

2015-07-11 11:25 1466 查看
/article/1256319.html

利用JQuery的load函数动态加载别的页面的代码，方便实时获取别的页面的内容。

在线演示:http://demo.jb51.net/js/JQueryload/index.htm

全部代码

复制代码代码如下:

<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() {

$('#load_content').load('loadContent1.htm');

});

$('#btnLoad2.button').click(function() {

$('#load_content').load('loadContent2.htm');

});

});

</script>

</head>

<body>

<form id="form1" runat="server">

<div id="container">

<div id="header">

<h2>JQuery Load Example</h2>

</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>这是要被加载的区域</h2>

</div>

</div>

</form>

</body>

</html>

loadContent1.htm

复制代码代码如下:

jb51.net

loadContent2.htm

复制代码代码如下:

sc.jb51.net
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航