利用JQuery的load函數(shù)動(dòng)態(tài)加載其它頁面的內(nèi)容的實(shí)現(xiàn)代碼
更新時(shí)間：2010年12月14日 19:59:51 作者：
利用JQuery的load函數(shù)動(dòng)態(tài)加載別的頁面的代碼，方便實(shí)時(shí)獲取別的頁面的內(nèi)容。
在線演示: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>這是要被加載的區(qū)域</h2>
</div>
</div>
</form>
</body>
</html>
loadContent1.htm
jb51.net
loadContent2.htm
sc.jb51.net
代碼打包下載
全部代碼
復(fù)制代碼 代碼如下:
<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>這是要被加載的區(qū)域</h2>
</div>
</div>
</form>
</body>
</html>
loadContent1.htm
復(fù)制代碼 代碼如下:
jb51.net
loadContent2.htm
復(fù)制代碼 代碼如下:
sc.jb51.net
代碼打包下載
您可能感興趣的文章:
- jQuery 源代碼顯示控件 (Ajax加載方式).
- jquery實(shí)現(xiàn)ajax加載超時(shí)提示的方法
- jquery加載頁面的方法(頁面加載完成就執(zhí)行)
- jQuery頁面加載初始化常用的三種方法
- jQuery Div中加載其他頁面的實(shí)現(xiàn)代碼
- 基于JQuery實(shí)現(xiàn)滾動(dòng)到頁面底端時(shí)自動(dòng)加載更多信息
- 解決用jquery load加載頁面到div時(shí),不執(zhí)行頁面js的問題
- jquery 頁面滾動(dòng)到底部自動(dòng)加載插件集合
- 用jQuery模擬頁面加載進(jìn)度條的實(shí)現(xiàn)代碼
- Jquery實(shí)現(xiàn)頁面加載時(shí)彈出對(duì)話框代碼
- 基于jQuery實(shí)現(xiàn)模擬頁面加載進(jìn)度條
- jQuery實(shí)現(xiàn)頁面滾動(dòng)時(shí)動(dòng)態(tài)加載內(nèi)容的方法
- jQuery常用的4種加載方式分析
相關(guān)文章
基于jquery的無縫循環(huán)新聞列表插件,需要的朋友可以參考下。2011-03-03
jQuery實(shí)現(xiàn)基本隱藏與顯示效果的方法詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)基本隱藏與顯示效果的方法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery中hide()、show()及toggle()等方法用于實(shí)現(xiàn)顯示/隱藏效果的相關(guān)操作技巧,需要的朋友可以參考下2018-09-09
jquery綁定click事件，怎么都不生效，這個(gè)問題很多朋友都有遇到過，下面為大家解決一下,需要的朋友可以參考下2014-02-02
利用JQuery寫一個(gè)簡(jiǎn)單的異步分頁插件
這篇文章主要為大家詳細(xì)介紹了如何利用JQuery寫一個(gè)簡(jiǎn)單的異步分頁插件，感興趣的小伙伴們可以參考一下2016-03-03
jquery分頁插件jquery.pagination.js實(shí)現(xiàn)無刷新分頁
這篇文章主要介紹了jquery分頁插件jquery.pagination.js實(shí)現(xiàn)無刷新分頁的相關(guān)資料,需要的朋友可以參考下2016-04-04
jQuery 全選 全不選 事件綁定的實(shí)現(xiàn)代碼
本文給大家分享一段代碼基于jQuery 全選 全不選 事件綁定的實(shí)現(xiàn)方法，代碼簡(jiǎn)單易懂，非常不錯(cuò)，需要的朋友參考下2017-01-01
jquery.validate.js 多個(gè)相同name的處理方式
本文通過代碼給大家介紹了jquery.validate.js 多個(gè)相同name的處理方式，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-07-07
推薦40個(gè)非常優(yōu)秀的jQuery插件和教程【系列三】
jQuery 在如今的 Web 開發(fā)項(xiàng)目中扮演著重要角色，jQuery 以其插件眾多、獨(dú)特、輕量以及支持大規(guī)模的網(wǎng)站開發(fā)聞名。本文大家分享40個(gè)實(shí)用的 jQuery 插件，可以根據(jù)您的項(xiàng)目需要來選擇使用2011-11-11
這篇文章主要介紹了jQuery的幾種選擇器詳解,Query 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素, 它基于已經(jīng)存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器,需要的朋友可以參考下2023-05-05
用jQuery實(shí)現(xiàn)可輸入多選下拉組合框?qū)嵗a
這篇文章主要介紹了用jquery實(shí)現(xiàn)可輸入多選下拉組合框的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01