三行三列Tab标签，以iframe作为内容导航窗口。很粗糙了，见笑，如果哪位高手知道如何使整行标签全部移动的最好方法，请一定不忘贴出。
index.htm //主文件
<!-- by firefly , johnikis@sohu.com -->
<!-- on May 29 , 2002 -->
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=gb2312">
<title>多标签模式菜单 - Test v1.0</title>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<script language="jscript" src=../../"activemenu.js"></script>
</head>
<body>
<p> </p>
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="33%"><img id="ai1" src=../../"aiimg_1.gif" width="124" height="26" onclick="acticlick(1,1)" style="cursor:hand;" onmouseover="this.src='aiimg_2.gif'" onmouseout="this.src='http://www.blue1000.com/bkhtml/2005-11/aiimg_1.gif'"></td>
<td width="33%"><img id="ai2" src=../../"aiimg_3.gif" width="124" height="26" onclick="acticlick(1,2)" style="cursor:hand;" onmouseover="this.src='aiimg_4.gif'" onmouseout="this.src='http://www.blue1000.com/bkhtml/2005-11/aiimg_3.gif'"></td>
<td width="34%"><img id="ai3" src=../../"aiimg_5.gif" width="124" height="26" onclick="acticlick(1,3)" style="cursor:hand;" onmouseover="this.src='aiimg_6.gif'" onmouseout="this.src='http://www.blue1000.com/bkhtml/2005-11/aiimg_5.gif'"></td>
</tr>
<tr>
<td width="100%" colspan="3">
<div>
<iframe id="ifet1" height="0" width="372" scrolling="auto" src=../../"etext1.htm" frameborder="no"></iframe>
</div>
</td>
</tr>
<!-- 第二部分开始 -->
<blockquote>
<tr>
<td width="33%"><img id="ai4" src=../../"aiimg_7.gif" width="124" height="26" onclick="acticlick(2,1)" style="cursor:hand;" onmouseover="this.src='aiimg_8.gif'" onmouseout="this.src='http://www.blue1000.com/bkhtml/2005-11/aiimg_7.gif'"></td>
<td width="33%"><img id="ai5" src=../../"aiimg_9.gif" width="124" height="26" onclick="acticlick(2,2)" style="cursor:hand;" onmouseover="this.src='aiimg_10.gif'" onmouseout="this.src='http://www.blue1000.com/bkhtml/2005-11/aiimg_9.gif'"></td>
<td width="34%"><img id="ai6" src=../../"aiimg_11.gif" width="124" height="26" onclick="acticlick(2,3)" style="cursor:hand;" onmouseover="this.src='aiimg_12.gif'" onmouseout="this.src='http://www.blue1000.com/bkhtml/2005-11/aiimg_11.gif'"></td>
</tr>
<tr>
<td width="100%" colspan="3"><div>
<iframe id="ifet2" height="0" width="372" scrolling="auto" src=../../"etext2.htm" frameborder="no"></iframe>
</div></td>
</tr>
</blockquote>
<!-- 第三部分开始 -->
<tr>
<td width="33%"><img id="ai7" src=../../"aiimg_13.gif" width="124" height="26" onclick="acticlick(3,1)" style="cursor:hand;" onmouseover="this.src='aiimg_14.gif'" onmouseout="this.src='http://www.blue1000.com/bkhtml/2005-11/aiimg_13.gif'"></td>
<td width="33%"><img id="ai8" src=../../"aiimg_15.gif" width="124" height="26" onclick="acticlick(3,2)" style="cursor:hand;" onmouseover="this.src='aiimg_16.gif'" onmouseout="this.src='http://www.blue1000.com/bkhtml/2005-11/aiimg_15.gif'"></td>
<td width="34%"><img id="ai9" src=../../"aiimg_17.gif" width="124" height="26" onclick="acticlick(3,3)" style="cursor:hand;" onmouseover="this.src='aiimg_18.gif'" onmouseout="this.src='http://www.blue1000.com/bkhtml/2005-11/aiimg_17.gif'"></td>
</tr>
<tr>
<td width="100%" colspan="3"><div id="etext1">
<iframe id="ifet3" width="372" height="0" scrolling="auto" src=../../"etext3.htm" frameborder="no"></iframe>
</div></td>
</tr>
</table>
</body>
</HTML>
activemenu.js //js引用文件
<!-- by firefly , johnikis@sohu.com -->
<!-- on May 29 , 2002 -->
function acticlick(rownum,colnum)
{
var i;
switch (rownum) {
case 1:
document.all("ifet1").style.height="160";
document.all("ifet2").style.height="0";
document.all("ifet3").style.height="0";
for (i=1;i<10;i++) document.all("ai"+i).src=../../"aiimg_"+(i*2-1)+".gif"
switch (colnum) {
case 1:
document.all("ai1").src=../../"aiimg_2.gif";
document.all("ai2").src=../../"aiimg_3.gif";
document.all("ai3").src=../../"aiimg_5.gif";
document.all("ifet1").src=../../"etext1.htm";
break;
case 2:
document.all("ai1").src=../../"aiimg_1.gif";
document.all("ai2").src=../../"aiimg_4.gif";
document.all("ai3").src=../../"aiimg_5.gif";
document.all("ifet1").src=../../"etext2.htm";
break;
case 3:
document.all("ai1").src=../../"aiimg_1.gif";
document.all("ai2").src=../../"aiimg_3.gif";
document.all("ai3").src=../../"aiimg_6.gif";
document.all("ifet1").src=../../"etext3.htm";
break;
}
break;
case 2:
document.all("ifet1").style.height="0";
document.all("ifet2").style.height="160";
document.all("ifet3").style.height="0";
for (i=1;i<10;i++) document.all("ai"+i).src=../../"aiimg_"+(i*2-1)+".gif"
switch (colnum) {
case 1:
document.all("ai4").src=../../"aiimg_8.gif";
document.all("ai5").src=../../"aiimg_9.gif";
document.all("ai6").src=../../"aiimg_11.gif";
document.all("ifet2").src=../../"etext1.htm";
break;
case 2:
document.all("ai4").src=../../"aiimg_7.gif";
document.all("ai5").src=../../"aiimg_10.gif";
document.all("ai6").src=../../"aiimg_11.gif";
document.all("ifet2").src=../../"etext2.htm";
break;
case 3:
document.all("ai4").src=../../"aiimg_7.gif";
document.all("ai5").src=../../"aiimg_9.gif";
document.all("ai6").src=../../"aiimg_12.gif";
document.all("ifet2").src=../../"etext3.htm";
break;
}
break;
case 3:
document.all("ifet1").style.height="0";
document.all("ifet2").style.height="0";
document.all("ifet3").style.height="160";
for (i=1;i<10;i++) document.all("ai"+i).src=../../"aiimg_"+(i*2-1)+".gif"
switch (colnum) {
case 1:
document.all("ai7").src=../../"aiimg_14.gif";
document.all("ai8").src=../../"aiimg_15.gif";
document.all("ai9").src=../../"aiimg_17.gif";
document.all("ifet3").src=../../"etext1.htm";
break;
case 2:
document.all("ai7").src=../../"aiimg_13.gif";
document.all("ai8").src=../../"aiimg_16.gif";
document.all("ai9").src=../../"aiimg_17.gif";
document.all("ifet3").src=../../"etext2.htm";
break;
case 3:
document.all("ai7").src=../../"aiimg_13.gif";
document.all("ai8").src=../../"aiimg_15.gif";
document.all("ai9").src=../../"aiimg_18.gif";
document.all("ifet3").src=../../"etext3.htm";
break;
}
break;
}
}
//里面有三个iframe外部引用文件etext1(2,3).htm需自制。
网页显示有限 阅读全文请下载本文完整版WORD文档