js頁面局部刷新問題

1、假設左邊tree的html結構：

<ul id="tree">

<li><a href="javascript:void(0)" link="format.html">課表查詢</a></li>

<li><a href="javascript:void(0)" link="1.html">信息修改</a></li>

</ul>

//註意以上a元素的link屬性代表中間將要顯示的頁面的名稱,根據需要自行修改

2、引入jquery庫，在head之間添加如下代碼：

$(function(){

var $tree_a = $("#tree").find("a");//獲取tree中的a元素集合

var $main = $("#main");//獲取中間部分元素

$tree_a.on("click", function(){

$main.empty();//初始化

var $frame =$("<iframe></iframe>");//定義框架對象

var $this = $(this);//當前被點擊的tree的a

$frame.attr({//設置中間部分框架的屬性

"src": $this.attr("link"),//框架引入的頁面地址

"name": "main_frame",//框架名稱

"width": $main.width() || "100%",//框架寬度

"height": $main.height() || "100%",//框架高度

"frameborder": "0",//框架邊框

"scrolling": "auto"//框架滾動條設置

});

$frame.appendTo($main);//將框架插入到中間部分

});

});

第二種方法，改變妳的代碼結構：

1、修改html結構，將中間部分更改為iframe

將

<div id="main" style="width:82%; background:yellow; height:500px; float:left">中間</div>

</div>

這段代碼修改為

<ifame name="main" src="" id="main" frameborder="0" width="82%" height="500px" scrolling="auto"></iframe>

2、修改左側tree的a元素

<a target="main" href="...">課表查詢</a>

......

有問題請留言