点击导航条的某一项，与之相对应的Iframe的切换同时加载数据（可用于多级菜单）...

一般用ifame时，都要用a标签与之链接，但有时在做向项目时，前台与后台不是同一个人做的，有时用a标签行不通。此时，可以用以下方法来解决。

用于div切换的函数

function switchTab1(ProTag, ProBox) {
for (i = 1; i < 9; i++) {
if ("tab" + i == ProTag) {

//改变所点击的字的颜色
document.getElementById(ProTag).style.color="#ff6600";
} else {
document.getElementById("tab" + i).style.color="";
}

//切换div,即iframe
if ("tabCont" + i == ProBox) {
document.getElementById(ProBox).style.display = "";
} else {
document.getElementById("tabCont" + i).style.display = "none";
}
}
}

/***********************举例说明切换及同时加载数据的方法***************************/

<li class="list2" id="tab1" οnclick="

//下面这句为点击事件：先到后台加载数据，再切换div(注意顺序不能反)，在点击导航条时每一个iframe都可以加载

javascript:document.getElementById('showif1').src='<z:path/>website/yyts/ActionWebsiteYyts?mode=GETTSZN';

 switchTab1('tab1','tabCont1');this.blur();return false;">
房屋征收投诉指南
</li>
<li class="list2" id="tab6" οnclick="javascript:document.getElementById('showif2').src='<z:path/>website/yyts/ActionWebsiteYyts?mode=GETTSZN;switchTab1('tab6','tabCont6');this.blur();return false;">
网络投诉指南
</li>

 

/******************************iframe********************************/

<!-- id="showif1"的iframe的src为进入该页面时所加载的数据，所以该div是显示的，后面的div都是隐藏的style="display: none;"-->

<div class="yyContR1" id="tabCont1">

<iframe id="showif1" src="<z:path/>website/yyts/ActionWebsiteYyts?mode=GETTSZN&param=house" scrolling="auto"></iframe>
</div>
<div class="yyContR1" id="tabCont6" style="display: none;">
<iframe id="showif2" src="<z:path/>website/yyts/tszn.jsp" scrolling="auto"></iframe>
</div>

分享给需要帮助的人！

转载于:https://www.cnblogs.com/smile-ls/archive/2012/12/15/2819424.html