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);
});
})
})
});
分享到:
相关推荐
JQUERY实现iframe页面切换功能,轻松简单、灵活方便快速,代码实例,测试通过
jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe...
jquery iframe tab实例 jquery iframe tab实例 jquery iframe tab实例 jquery iframe tab实例 可实现动态添加或删除tab页
jQuery评论框插入表情图片代码,一款简单实用的点击图标弹出QQ表情包选择插入表情到评论输入框代码。
jquery 插入节点 节点jquery 插入节点 节点
基于jQuery的HTML5移动端音乐播放器源码 基于jQuery的HTML5移动端音乐播放器源码 基于jQuery的HTML5移动端音乐播放器源码 基于jQuery的HTML5移动端音乐播放器源码 基于jQuery的HTML5移动端音乐播放器...
jQuery-1.8.3(&2.1.4).min.js&jquery;.fileupload&jquery;.iframe-transport
jQuery评论框插入QQ表情代码是一款点击图标弹出表情包,插入表情代码。 jQuery评论框插入QQ表情代码截图
jQuery评论框插入表情图片代码
在html中用jquery实现点击插入标签源码
NULL 博文链接:https://java378656992.iteye.com/blog/1264755
jquery tab 切换页面 支持iframe 有iframe引用示例
分析比较了EasyUI、JQueryUI、HTML5的拖拽优缺点,并给出跨iframe拖拽的实现方案(跨iframe拖拽功能,必须将代码存放到服务器上访问才能正常拖拽,本地打开可能无法拖拽,具体原因不是很清楚)
jquery提供的波形图html文档,纯粹的html布局与框架
jQuery插件 文本框、文本域 光标处插入代码 免费就是强大, 大家一起共享哈....
之前写过一个JQuery竖排Tab的代码示例,现在补充写了一个横排的,并结合了iframe的使用,自己项目的样式或者一些补充功能都可以基于此示例延伸开发
本人开发的积累总结,Iframe模拟Ajax 可以跨越的操作。
NULL 博文链接:https://eric-gao.iteye.com/blog/640267
jquery.iframe-transport.js包
[removed]$.include("include.inc");[removed] 例子 索引.htm : <html> <head> [removed][removed] [removed][removed] [removed] $(document).ready(function () { alert($("#...