点击导航条的某一项,与之相对应的Iframe的切换同时加载数据(可用于多级菜单)
2012-12-15 16:15
316 查看
一般用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" onclick="
//下面这句为点击事件:先到后台加载数据,再切换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" onclick="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¶m=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>
分享给需要帮助的人!
用于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" onclick="
//下面这句为点击事件:先到后台加载数据,再切换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" onclick="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¶m=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>
分享给需要帮助的人!
相关文章推荐
- PHP+Mysql+easyui点击左侧tree菜单对应表名右侧动态生成datagrid加载表单数据(二)
- 安卓开发-ListView侧拉菜单,置顶等仿QQ侧拉菜单侧拉点击切换图片,侧拉点击事件带上拉加载更多,下拉刷新
- ztree实现异步加载(点击节点,请求后台数据,添加数据到对应节点)
- iframe异步加载(点击左边菜单加载右边内容)
- bootStrap异步加载数据(动态加载数据)一二级菜单点击失效的解决办法
- iframe异步加载实现点击左边菜单加载右边内容实例讲解
- 多级选择菜单——数据加载
- iframe异步加载实现点击左边菜单加载右边内容实例讲解
- iframe异步加载(点击左边菜单加载右边内容)
- asp.net母版页中实现点击菜单切换对应的样式
- JsTree异步加载数据实现多级菜单
- angular点击button切换相对页面同时按钮变颜色
- 鼠标滚轮到最底端继续加载新数据思路(多用于微博、空间、论坛)
- ajax实现点击左侧菜单,右侧加载不同网页
- Android 加载成功、加载失败、加载中、无数据四个不同界面的切换
- 点击侧滑任何一个 菜单项,请求网络数据展示在主界面的xlistview中且实现下拉刷新效果和上拉加载的分页加载数据效果
- loadrunner实现使用相同excel文档不同列的数据同时参数化多个字段,实现插入的数据一一对应
- 导航条点击按钮切换效果
- SolpartMenu的使用:(二)、在ASP.NET页面中使用SolpartMenu控件之动态的加载数据库中的数据来生成菜单
- struts动态加载多级菜单