基于jQuery实现点击同时更改两个iframe的网址

个人推荐用jQuery实现,代码简洁,扩展性强.
jQuery部分:


代码如下:

function gotourl(url_a, url_b)
{
$('#ifr_a').get(0).src = url_a;
$('#ifr_b').get(0).src = url_b;
}

html调用:

<a href="javascript:void(0)" onClick="gotourl('http://g.cn/','http://baidu.com');">点我下面两个iframe内容都会变</a>
<iframe src="http://jb51.net/" id="ifr_a" name="ifr_a" frameborder="0"></iframe>
<iframe src="http://s.jb51.net/" id="ifr_b" name="ifr_b" frameborder="0"></iframe>
通过js判断iframe的id,然后给不同id赋不同的src值也可以实现,但代码相对复杂一点.

原文发布于Mr.Think的个人博客: http://mrthink.net/javascript-jquery-twourl-twoifram/

赞 (0)

相关推荐

  • 基于jQuery实现点击同时更改两个iframe的网址

    个人推荐用jQuery实现,代码简洁,扩展性强. jQuery部分: 复制代码 代码如下: function gotourl(url_a, url_b) { $('#ifr_a').get(0).src = url_a; $('#ifr_b').get(0).src = url_b; } html调用: <a href="javascript:void(0)" onClick="gotourl('http://g.cn/','http://baidu.com');&qu

  • 基于jquery实现导航菜单高亮显示（两种方法）

    基于jquery实现导航菜单高亮显示（两种方法）

    项目需求: 实现原理:当选中当前元素时,给当前元素添加样式,同级元素移除样式. 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 效果图如下: 示例代码一: 具体示例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

  • 基于jQuery实现点击弹出层实例代码

    jquery实现点击链接弹出层效果:本例实现的主要原理:jquery操作DOM元素.对层样式的设置.将display:设置为none;让层隐藏: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net" /> <tit

  • 基于jQuery实现点击最后一行实现行自增效果的表格

    现在任何事务都追求效率和人性化,当然网页效果也是如此,如果一个可以编辑数据的表格,编辑到最后一行的时候,点击可以自动添加一行,这样算是一个比较人性化的效果,可以免去一丝劳顿之苦,下面分享一段这样的代码. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.j

  • 基于jquery的点击链接插入链接内容的代码

    点击链接插入链接内容. 亮点: 1.正则匹配<a>标记. 2.jQuery单击添加,双击删除. 3.textarea加入换行. 核心代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

  • 基于jQuery实现点击列表加载更多效果

    本文实例为大家分享了jQuery点击加载更多效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery s

  • 基于jquery实现点击左右按钮图片横向滚动

    基于jquery实现点击左右按钮图片横向滚动

    点击左右按钮图片横向滚动jquery,一次滚动四个,图片滚动完成,自动回到第一个版面: 效果图如下: 复制代码 代码如下: <!DOCTYPE html> <html lange="en"> <head> <title>点击左右按钮图片横向滚动</title> <meta charset=utf-8" /> <style type="text/css"> * { margi

  • 基于jquery鼠标点击其它地方隐藏层的实例代码

    基于jquery鼠标点击其它地方隐藏层的实例代码

    效果图:下面的代码运行后,需要再刷新一下. test .div_d{ padding:10px; border:1px dotted red; position:absolute; display:none; cursor:pointer;} $(function(){ $("input[id=search]").focus(function(even){ var pos=$(this).offset(); $(".div_d").css({left:pos.lef

  • 基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载

    基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载

    基于jQuery鼠标点击水波动画竖直导航代码.这是一款基于jQuery+CSS3实现的带动画效果的竖直导航栏特效.效果图如下: 效果展示    源码下载 html代码: <div class="nav"> <ul> <li><a>网站首页</a></li> <li><a>关于我们</a></li> <li><a>产品中心</a>&l

  • 基于jQuery插件实现点击小图显示大图效果

    基于jQuery插件实现点击小图显示大图效果

    本文实例为大家分享了基于jQuery实现点击小图显示大图效果,供大家参考,具体内容如下 显示以下效果: 点击任意一张图片会显示大图: 1.前台界面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="练习.WebForm1" %> <!DOCTYPE html PUBLIC "-/

随机推荐