论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

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

文章类别:Javascript | 发表日期:2010-4-26 9:28:45

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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


<html xmlns="http://www.w3.org/1999/xhtml">
<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;
cursorointer;
}

.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><!--/tb_-->
<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="http://mv.molihe.com/"></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="http://mmmlm.blog.hexun.com/"></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="http://www.jiqie.com/"></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="http://mmmlm.blog.hexun.com/"></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="http://diy.czxiu.com/"></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="http://mmmlm.blog.hexun.com/"></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="http://mv.molihe.com/"></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="http://www.jiqie.com/"></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="http://diy.czxiu.com/"></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="http://mmmlm.blog.hexun.com"></iframe></div>
</div><!--/ctt-->
</div><!--/w936-->

</body>
</html>
21视频教程网
其实你不需要这么多iframe的,只要一个iframe每次点击选项卡的时候给iframe的src赋值就可以了~
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058