基于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 Datatable 多個(gè)查詢條件自定義提交事件(推薦)
這篇文章主要介紹了jQuery Datatable 多個(gè)查詢條件自定義提交事件的相關(guān)資料,需要的朋友可以參考下2017-08-08
在網(wǎng)站開發(fā)中我們經(jīng)常需要將對(duì)話框顯示在屏幕的中央。如果使用Javascript因?yàn)闉g覽器實(shí)現(xiàn)的差異，實(shí)現(xiàn)起來(lái)非常麻煩。但是JQuery可以很簡(jiǎn)單實(shí)現(xiàn)的搞定這一切。2010-02-02
本文講解如何使用jQuery實(shí)現(xiàn)城市查詢和日歷顯示的整個(gè)流程，需要的朋友可以參考下2015-10-10
jquery.cookie.js實(shí)現(xiàn)用戶登錄保存密碼功能的方法
這篇文章主要介紹了jquery.cookie.js實(shí)現(xiàn)用戶登錄保存密碼功能的方法,結(jié)合實(shí)例形式詳細(xì)分析了jquery.cookie.js插件操作cookie實(shí)現(xiàn)保存用戶登錄信息的相關(guān)技巧,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了jquery文本框中的事件應(yīng)用以輸入郵箱為例,需要的朋友可以參考下2014-05-05
jQuery滿意度星級(jí)評(píng)價(jià)插件特效代碼分享
這篇文章主要介紹了jQuery滿意度星級(jí)評(píng)價(jià)插件特效,我們可以自定義每個(gè)五角星代表的分值，鼠標(biāo)滑過(guò)五角星時(shí)即可計(jì)算當(dāng)前的分值，這款jQuery評(píng)分插件非常簡(jiǎn)單而且實(shí)用。有需要的小伙伴可以參考下2015-08-08
這篇文章主要介紹了jQuery 3.0中存在問(wèn)題及解決辦法的相關(guān)資料,需要的朋友可以參考下2016-07-07
jQuery.extend 與 jQuery.fn.extend的用法及區(qū)別實(shí)例分析
這篇文章主要介紹了jQuery.extend 與 jQuery.fn.extend的用法及區(qū)別,結(jié)合實(shí)例形式分析了jQuery.extend與jQuery.fn.extend的功能、使用方法及區(qū)別,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了JQuery中Text方法用法,實(shí)例分析了Text方法設(shè)置文本內(nèi)容的使用方法,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了jquery搜索框效果實(shí)現(xiàn)方法,分析了jquery搜索框效果的實(shí)現(xiàn)技巧及注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01