Javascript教程_切换卡加载多个页面时解决只加载一个页面的问题_Javascript教程_H5之家

切换卡加载多个页面时解决只加载一个页面的问题教程

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

现在问题是打开这个切换卡时，所有的ifame全部都调入，页面好慢，怎样才能打开一个切换卡时只加载一个而其它的不会载入，这样页面会不会快些呢？

<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>切换效果</title>

<style type="text/css">
UL{
list-style-type:none;
margin:0px;
}

.ctt{
width:928px;
clear:both;
border:1px solid #b9d4e2;
border-top:0;
text-align:left;
}
#w936{
text-align:center;
width:930px;
margin:0px 0px 5px 10px;
}
.tb_{
border:1px;
solid #b9d4e2;
}
.tb_ ul{
height:24px;
}
.tb_ li{
float:left;
height: 24px;
line-height:2;
width: 93px;
cursor

ointer;
}

.normaltab{
background-image:url(dh1.gif);
background-repeat: no-repeat;
color:#666;
}
.hovertab{
background-image:url(dh2.gif);
color:#136db7;
font-weight:bold
}
.dis{
display:block;
}
.undis{
display:none;
}
</style>
<Script Language="JavaScript">function g(o){return document.getElementById(o);}
function HoverLi(n){
for(var i=1;i<=9;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}</Script>
</head>
<body>
<div id="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1);">首页</li><li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);">购物</li><li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3);">股票</li><li id="tb_4" class="normaltab" onmouseover="o:HoverLi(4);">游戏</li><li id="tb_5" class="normaltab" onmouseover="g:HoverLi(5);">软件</li><li id="tb_6" class="normaltab" onmouseover="z:HoverLi(6);">生活</li><li id="tb_7" class="normaltab" onmouseover="a:HoverLi(7);">QQ</li><li id="tb_8" class="normaltab" onmouseover="o:HoverLi(8);">素材</li><li id="tb_9" class="normaltab" onmouseover="g:HoverLi(9);">网赚</li><li id="tb_10" class="normaltab" onmouseover="z:HoverLi(10);">底部</li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_01">网页1<iframe style="background: transparent;" allowTransparency="true" marginwidth="0" marginheight="0" scrolling="no"framespacing="0" vspace="0" hspace="0" frameborder="0" width="925" height="160" src=""></iframe></div>

<div class="undis" id="tbc_02">网页2<iframe style="background: transparent;" allowTransparency="true" marginwidth="0" marginheight="0" scrolling="no"framespacing="0" vspace="0" hspace="0" frameborder="0" width="925" height="160" src=""></iframe></div>

<div class="undis" id="tbc_03">网页3<iframe style="background: transparent;" allowTransparency="true" marginwidth="0" marginheight="0" scrolling="no"framespacing="0" vspace="0" hspace="0" frameborder="0" width="925" height="160" src=""></iframe></div>

<div class="undis" id="tbc_04">网页4<iframe style="background: transparent;" allowTransparency="true" marginwidth="0" marginheight="0" scrolling="no"framespacing="0" vspace="0" hspace="0" frameborder="0" width="925" height="160" src=""></iframe></div>

<div class="undis" id="tbc_05">网页5<iframe style="background: transparent;" allowTransparency="true" marginwidth="0" marginheight="0" scrolling="no"framespacing="0" vspace="0" hspace="0" frameborder="0" width="925" height="160" src=""></iframe></div>

<div class="undis" id="tbc_06">网页6<iframe style="background: transparent;" allowTransparency="true" marginwidth="0" marginheight="0" scrolling="no"framespacing="0" vspace="0" hspace="0" frameborder="0" width="925" height="160" src=""></iframe></div>

<div class="undis" id="tbc_07">网页7<iframe style="background: transparent;" allowTransparency="true" marginwidth="0" marginheight="0" scrolling="no"framespacing="0" vspace="0" hspace="0" frameborder="0" width="925" height="160" src=""></iframe></div>

<div class="undis" id="tbc_08">网页8<iframe style="background: transparent;" allowTransparency="true" marginwidth="0" marginheight="0" scrolling="no"framespacing="0" vspace="0" hspace="0" frameborder="0" width="925" height="160" src=""></iframe></div>

<div class="undis" id="tbc_09">网页9<iframe style="background: transparent;" allowTransparency="true" marginwidth="0" marginheight="0" scrolling="no"framespacing="0" vspace="0" hspace="0" frameborder="0" width="925" height="160" src=""></iframe></div>

<div class="undis" id="tbc_10">网页10<iframe style="background: transparent;" allowTransparency="true" marginwidth="0" marginheight="0" scrolling="no"framespacing="0" vspace="0" hspace="0" frameborder="0" width="925" height="160" src=""></iframe></div>
</div>
</div>

</body>
</html>

教程网

其实你不需要这么多iframe的，只要一个iframe每次点击选项卡的时候给iframe的src赋值就可以了~