欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery Include HTML、插入html、jquery替代iframe 博客分类: jqueryhtml

程序员文章站 2024-03-22 20:21:52
...
jQuery能做到的比iframe连接另一个网页html內容來的活用,使用css做样式变化,也较有弹性。再次比较sp include 和 php include 这样的方式无需使用以上asp和php服务器就能达到你想要的include html

下列程式变化更加入了导航(Menu list)做连接的切换,分別使用jquery include
三个html网页(a.html、 b.html、c.html)。
希望这样的方式能为您带來好的帮助。
<ul class="list-side">
<li><a target="a.html" >about</a></li>
<li><a target="b.html" >news</a></li>
<li><a target="c.html" >product</a></li>
<li><a href="http://ucmic.blogspot.com/" target="_blank" >contact</a></li>
</ul>

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


$(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('target'); // 找到超链接a中的targer标签值
 $.get(_clickTab,function(data){
 $("#iframe").html(data); 
 });
})
})
});