使用iframe实现实时页面切换-优快云博客

本文链接：https://blog.youkuaiyun.com/finger_tip/article/details/2468676

父页面:aaa.htm 子页面:bbb.htm，ccc.htm ddd.htm

使用标签：iframe

实现功能：在父页面中单击左面部分的树形菜单，右面部分实现内容的更换，左面部分不变。

代码部分： aaa.htm

<html><script type="text/javascript">function switchMenu(curr_id, total_num){ for(var i=0; i<total_num; i++) { //二级菜单 var el = document.getElementById('menu_sub_'+i); if(!el) return; //一级菜单前面的图片 var img = document.getElementById('menu_master_'+i); if(i == curr_id) { el.style.display = "block"; img.src = "open.gif"; } else { el.style.display = "none"; img.src = "close.gif"; } }}</script><table><td><div id=productmuen> <div class="menu_master" onClick="javascript:switchMenu(0, 4);"> <img src="close.gif" alt="close" id="menu_master_0" /> 婴儿套装</div> <div id="menu_sub_0" class="sub_menu"> <ul> <li><a href="bbb.htm" title="婴儿套装" target="kkk"> 婴儿套装1</a></li> <li><a href="ccc.htm" title="婴儿套装" target="kkk"> 婴儿套装2</a></li> <li><a href="ddd.htm" title="婴儿套装" target="kkk"> 婴儿套装3</a></li> </ul> </div> <div class="menu_master" onClick="javascript:switchMenu(1, 4);"> <img src="close.gif" alt="close" id="menu_master_1" /> 毛巾</div> <div id="menu_sub_1" class="sub_menu"> <ul> <li><a href="#" title="素色毛巾">素色毛巾</a></li> <li><a href="#" title="素色毛巾">素色毛巾</a></li> </ul> </div></div></td><td><iframe name=kkk frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 scrolling=no src="bbb.htm"></iframe></td></table></html>

bbb.htm ccc.htm ddd.htm 要显示的内容