当前位置:编程学习 > asp >>

抛石头引玉:自制的Tab多标签导航栏。

答案:三行三列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=http://old.zzzyk.com/article/Article/"http://old.zzzyk.com/article/Article/aiimg_1.gif" width="124" height="26" onclick="acticlick(1,1)" style="cursor:hand;" onmouseover="this.src='http://old.zzzyk.com/article/Article/aiimg_2.gif'" onmouseout="this.src='http://old.zzzyk.com/article/Article/aiimg_1.gif'"></td>
    <td width="33%"><img id="ai2" src=http://old.zzzyk.com/article/Article/"http://old.zzzyk.com/article/Article/aiimg_3.gif" width="124" height="26" onclick="acticlick(1,2)" style="cursor:hand;" onmouseover="this.src='http://old.zzzyk.com/article/Article/aiimg_4.gif'" onmouseout="this.src='http://old.zzzyk.com/article/Article/aiimg_3.gif'"></td>
    <td width="34%"><img id="ai3" src=http://old.zzzyk.com/article/Article/"http://old.zzzyk.com/article/Article/aiimg_5.gif" width="124" height="26" onclick="acticlick(1,3)" style="cursor:hand;" onmouseover="this.src='http://old.zzzyk.com/article/Article/aiimg_6.gif'" onmouseout="this.src='http://old.zzzyk.com/article/Article/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=http://old.zzzyk.com/article/Article/"http://old.zzzyk.com/article/Article/aiimg_7.gif" width="124" height="26" onclick="acticlick(2,1)" style="cursor:hand;" onmouseover="this.src='http://old.zzzyk.com/article/Article/aiimg_8.gif'" onmouseout="this.src='http://old.zzzyk.com/article/Article/aiimg_7.gif'"></td>
    <td width="33%"><img id="ai5" src=http://old.zzzyk.com/article/Article/"http://old.zzzyk.com/article/Article/aiimg_9.gif" width="124" height="26" onclick="acticlick(2,2)" style="cursor:hand;" onmouseover="this.src='http://old.zzzyk.com/article/Article/aiimg_10.gif'" onmouseout="this.src='http://old.zzzyk.com/article/Article/aiimg_9.gif'"></td>
    <td width="34%"><img id="ai6" src=http://old.zzzyk.com/article/Article/"http://old.zzzyk.com/article/Article/aiimg_11.gif" width="124" height="26" onclick="acticlick(2,3)" style="cursor:hand;" onmouseover="this.src='http://old.zzzyk.com/article/Article/aiimg_12.gif'" onmouseout="this.src='http://old.zzzyk.com/article/Article/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=http://old.zzzyk.com/article/Article/"http://old.zzzyk.com/article/Article/aiimg_13.gif" width="124" height="26" onclick="acticlick(3,1)" style="cursor:hand;" onmouseover="this.src='http://old.zzzyk.com/article/Article/aiimg_14.gif'" onmouseout="this.src='http://old.zzzyk.com/article/Article/aiimg_13.gif'"></td>
    <td width="33%"><img id="ai8" src=http://old.zzzyk.com/article/Article/"http://old.zzzyk.com/article/Article/aiimg_15.gif" width="124" height="26" onclick="acticlick(3,2)" style="cursor:hand;" onmouseover="this.src='http://old.zzzyk.com/article/Article/aiimg_16.gif'" onmouseout="this.src='http://old.zzzyk.com/article/Article/aiimg_15.gif'"></td>
    <td width="34%"><img id="ai9" src=http://old.zzzyk.com/article/Article/"http://old.zzzyk.com/article/Article/aiimg_17.gif" width="124" height="26" onclick="acticlick(3,3)" style="cursor:hand;" onmouseover="this.src='http://old.zzzyk.com/article/Article/aiimg_18.gif'" onmouseout="this.src='http://old.zzzyk.com/article/Article/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=http://old.zzzyk.com/article/Article/"aiimg_"+(i*2-1)+".gif"
      switch (colnum) {
        case 1:
            document.all("ai1").src="http://old.zzzyk.com/article/Article/aiimg_2.gif";
            document.all("ai2").src=http://old.zzzyk.com/article/Article/"http://old.zzzyk.com/article/Article/aiimg_3.gif";
            document.all("ai3").src=http://old.zzzyk.com/article/

上一个:to hiller:利用脚本控制表格单元的内容(原创)
下一个:Sql表数据操作

CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,