jQuery Include HTML:jQuery替代iframe插入Include HTML方法

使用jQuery來達到如iframe、asp include 和 php include 的效果
 

jQuery能做到的比iframe連結另一個網頁html內容來的活用,使用css做樣式變化,也較有彈性。再次比較asp includephp include 這樣的方式,無須使用以上asp和php伺服器就能達到你想要的include html。(注意:此方法get()屬於ajax需要在server上執行。)

 下列程式變化加入了選單(Menu list)做連結的切換,分別使用jquery include
三個html網頁檔案(a.html、 b.html、c.html)。
希望這樣的方式能幫助到您。
 

HTML

<ul class="list-side">
<li><a href="/a.html" >About</a></li>
<li><a href="/b.html" >News</a></li>
<li><a href="/c.html" >Product</a></li>
<li><a href="http://www.ucamc.com/" target="_blank" >UCAMC</a></li>
</ul>

<div id="iframe">
<!--jquery 插入html 位址-->
</div>

 

jQuery

 

$(document).ready(function(){ 
$.get("a.html",function(data){ //初始將a.html include div#iframe
$("#iframe").html(data);
}); 
$(function(){
$('.list-side li').click(function() {
		// 找出 li 中的超連結 href(#id)
	var $this = $(this),
	_clickTab = $this.find('a').attr('href'); // 找到連結a中的href標籤值
	if("-1"==_clickTab.search("http://")){ //不為http://執行下列程式
		$.get(_clickTab,function(data){
		$("#iframe").html(data);	
		});
		return false
	}
})
})
});

DEMO | 下載範例程式碼

您會有興趣的文章:【jQuery教學】jQuery切換不同CSS樣式style:切換class、切換樣式、轉換不同CSS

 

Posted in Javascript

Find the last offers by SkyBet at www.bettingy.com BettingY.com Bonuses