基于jQuery實(shí)現(xiàn)點(diǎn)擊同時(shí)更改兩個(gè)iframe的網(wǎng)址
更新時(shí)間：2010年07月01日 16:37:00 作者：
最近寫了兩個(gè)管理后臺(tái)的前端頁(yè)面,其中有一個(gè)管理后臺(tái),左側(cè)菜單導(dǎo)航和右側(cè)內(nèi)容頁(yè)是兩個(gè)iframe,需求是,點(diǎn)擊上面的主導(dǎo)航時(shí),左側(cè)iframe和右側(cè)iframe調(diào)用不同的鏈接.
個(gè)人推薦用jQuery實(shí)現(xiàn),代碼簡(jiǎn)潔,擴(kuò)展性強(qiáng).
jQuery部分:
function gotourl(url_a, url_b)
{
$('#ifr_a').get(0).src = url_a;
$('#ifr_b').get(0).src = url_b;
}
html調(diào)用:
<a href="javascript:void(0)" onClick="gotourl('http://g.cn/','http://baidu.com');">點(diǎn)我下面兩個(gè)iframe內(nèi)容都會(huì)變</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>
通過(guò)js判斷iframe的id,然后給不同id賦不同的src值也可以實(shí)現(xiàn),但代碼相對(duì)復(fù)雜一點(diǎn).
原文發(fā)布于Mr.Think的個(gè)人博客: http://mrthink.net/javascript-jquery-twourl-twoifram/
jQuery部分:
復(fù)制代碼 代碼如下:
function gotourl(url_a, url_b)
{
$('#ifr_a').get(0).src = url_a;
$('#ifr_b').get(0).src = url_b;
}
html調(diào)用:
<a href="javascript:void(0)" onClick="gotourl('http://g.cn/','http://baidu.com');">點(diǎn)我下面兩個(gè)iframe內(nèi)容都會(huì)變</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>
通過(guò)js判斷iframe的id,然后給不同id賦不同的src值也可以實(shí)現(xiàn),但代碼相對(duì)復(fù)雜一點(diǎn).
原文發(fā)布于Mr.Think的個(gè)人博客: http://mrthink.net/javascript-jquery-twourl-twoifram/
相關(guān)文章
這篇文章主要介紹了jQuery Ajax通用js封裝的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋
一個(gè)輕量級(jí)的cookie 插件，可以讀取、寫入、刪除 cookie。這篇文章主要介紹了jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了jQuery中addClass()方法用法,實(shí)例分析了addClass()方法的功能、定義及向匹配元素添加一個(gè)或多個(gè)類的使用技巧,需要的朋友可以參考下2015-01-01
jQuery實(shí)現(xiàn)滾動(dòng)到底部時(shí)自動(dòng)加載更多的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)滾動(dòng)到底部時(shí)自動(dòng)加載更多的方法,涉及jQuery基于ajax動(dòng)態(tài)操作頁(yè)面元素相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-02-02
在jQuery里面對(duì)于一些HTML的元素操作都是很簡(jiǎn)化的，這也是很多人選擇使用jQuery的原因。2009-11-11
這篇文章主要介紹了jQuery判斷數(shù)組是否包含了指定的元素的方法,需要的朋友可以參考下2015-03-03
jQuery簡(jiǎn)單幾行代碼實(shí)現(xiàn)tab切換
本文給大家介紹的是一款使用jQuery實(shí)現(xiàn)的簡(jiǎn)易選項(xiàng)卡的代碼，通過(guò)控制css熟悉來(lái)實(shí)現(xiàn)tab切換，思路清晰，這里推薦給大家。2015-03-03
jquery 觸發(fā)a鏈接點(diǎn)擊事件解決方案
使用jquery為a連接綁定點(diǎn)擊事件，具體代碼如下，感興趣的朋友可以參考下，希望可以幫助到你2013-05-05
這篇文章主要為大家詳細(xì)介紹了jQuery層級(jí)選擇器實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
jquery實(shí)現(xiàn)兩個(gè)div中的元素相互拖動(dòng)的方法分析
這篇文章主要介紹了jquery實(shí)現(xiàn)兩個(gè)div中的元素相互拖動(dòng)的方法,結(jié)合實(shí)例形式分析了jQuery基于鼠標(biāo)事件響應(yīng)的頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-04-04