選項卡二

于 2007-04-13 16:23:00 发布
阅读量535 收藏
点赞数
分类专栏： CSS HTML TABTABLE 文章标签： menu border table class function div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ytbada/article/details/1563715
版权

<html>
<head>
<style type="text/css">
<!--
.tablestyle1 {
 font: normal 12px "宋体", Arial;
 color: #777777;
 text-decoration: none;
 text-align: center;
 vertical-align: middle;
 border-top: 1px solid #E4E4E4;
 border-right: 1px solid #4E4E4E;
 border-bottom: 1px solid #4E4E4E;
 border-left: 1px solid #E4E4E4;
 background: #FDFDFD;
}
.Tdstyle1 {
 background: #FDFDFD;
 border-top: 1px solid #E6E6E6;
 border-right: 1px solid #E6E6E6;
 border-bottom: 1px solid #E6E6E6;
 border-left: 1px solid #E6E6E6;
 cursor: hand;
 text-decoration: none;
}
.Titledivstyle {
 text-align: justify;
 text-justify:Distribute-all-lines;
}
.inf1 {
 color: #EDB905;
}
.inf2 {
 color: #107460;
}
body {
 margin-left: 0px;
 margin-top: 0px;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function iniINF(Init)//在网页初始化时，将各项详细信息隐藏的过程。
{
 if(Init)
 {
  inf1.style.display='none';
  inf2.style.display="none";
  inf3.style.display="none";
  inf4.style.display="none";
  inf5.style.display="none";
  inf6.style.display="none";
 }
}
function showinf(theObj)//查找并显示对应详细信息的过程。
{
 switch(theObj)
 {
  case 'inf1'://当鼠标点击目标为“银行汇款”时的处理过程。
   with(findObj(theObj))
   if(style.display=='none')//检查当前鼠标点击的选项的详细信息是否已处于显示状态。若已显示，则关闭；若未显示，则弹出。
   {
    style.display='';
    
    inf2.style.display="none";
    inf3.style.display="none";
    inf4.style.display="none";
    inf5.style.display="none";
    inf6.style.display="none";
    Menu1.style.color='#FF0000';
    Menu1.style.background='#E1F8C2';
    Menu2.style.color='';
    Menu2.style.background='';
    Menu3.style.color='';
    Menu3.style.background='';
    Menu4.style.color='';
    Menu4.style.background='';
    Menu5.style.color='';
    Menu5.style.background='';
    Menu6.style.color='';
    Menu6.style.background='';
   }
   else
   {
    style.display='none';
                                                        Menu1.style.color='';
    Menu1.style.background='';    
   }
   break;
  case 'inf2'://当鼠标点击目标为“邮局汇款”时的处理过程。
   with(findObj(theObj))
   if(style.display=='none')
   {
    style.display='';
    
    inf1.style.display="none";
    inf3.style.display="none";
    inf4.style.display="none";
    inf5.style.display="none";
    inf6.style.display="none";
    Menu2.style.color='#FF0000';
    Menu2.style.background='#E1F8C2';
    Menu1.style.color='';
    Menu1.style.background='';
    Menu3.style.color='';
    Menu3.style.background='';
    Menu4.style.color='';
    Menu4.style.background='';
    Menu5.style.color='';
    Menu5.style.background='';
    Menu6.style.color='';
    Menu6.style.background='';
   }
   else
   {
    style.display='none';
    
    Menu2.style.color='';
    Menu2.style.background='';
   }
   break;
  case 'inf3'://当鼠标点击目标为“网上支付”时的处理过程。
   with(findObj(theObj))
   if(style.display=='none')
   {
    style.display='';
    
    inf2.style.display="none";
    inf1.style.display="none";
    inf4.style.display="none";
    inf5.style.display="none";
    inf6.style.display="none";
    Menu3.style.color='#FF0000';
    Menu3.style.background='#E1F8C2';
    Menu2.style.color='';
    Menu2.style.background='';
    Menu1.style.color='';
    Menu1.style.background='';
    Menu4.style.color='';
    Menu4.style.background='';
    Menu5.style.color='';
    Menu5.style.background='';
    Menu6.style.color='';
    Menu6.style.background='';
   }
   else
   {
    style.display='none';
    
    Menu3.style.color='';
    Menu3.style.background='';
   }
   break;
  case 'inf4'://当鼠标点击目标为“电话充值”时的处理过程。
   with(findObj(theObj))
   if(style.display=='none')
   {
    style.display='';
    
    inf2.style.display="none";
    inf3.style.display="none";
    inf1.style.display="none";
    inf5.style.display="none";
    inf6.style.display="none";
    Menu4.style.color='#FF0000';
    Menu4.style.background='#E1F8C2';
    Menu2.style.color='';
    Menu2.style.background='';
    Menu3.style.color='';
    Menu3.style.background='';
    Menu1.style.color='';
    Menu1.style.background='';
    Menu5.style.color='';
    Menu5.style.background='';
    Menu6.style.color='';
    Menu6.style.background='';
   }
   else
   {
    style.display='none';
    
    Menu4.style.color='';
    Menu4.style.background='';
   }
   break;
  case 'inf5'://当鼠标点击目标为“手机充值”时的处理过程。
   with(findObj(theObj))
   if(style.display=='none')
   {
    style.display='';
    
    inf2.style.display="none";
    inf3.style.display="none";
    inf4.style.display="none";
    inf1.style.display="none";
    inf6.style.display="none";
    Menu5.style.color='#FF0000';
    Menu5.style.background='#E1F8C2';
    Menu2.style.color='';
    Menu2.style.background='';
    Menu3.style.color='';
    Menu3.style.background='';
    Menu4.style.color='';
    Menu4.style.background='';
    Menu1.style.color='';
    Menu1.style.background='';
    Menu6.style.color='';
    Menu6.style.background='';
   }
   else
   {
    style.display='none';
    
    Menu5.style.color='';
    Menu5.style.background='';
   }
   break;
  case 'inf6'://当鼠标点击目标为“U币卡充值”时的处理过程。
   with(findObj(theObj))
   if(style.display=='none')
   {
    style.display='';
    
    inf2.style.display="none";
    inf3.style.display="none";
    inf4.style.display="none";
    inf5.style.display="none";
    inf1.style.display="none";
    Menu6.style.color='#FF0000';
    Menu6.style.background='#E1F8C2';
    Menu2.style.color='';
    Menu2.style.background='';
    Menu3.style.color='';
    Menu3.style.background='';
    Menu4.style.color='';
    Menu4.style.background='';
    Menu5.style.color='';
    Menu5.style.background='';
    Menu1.style.color='';
    Menu1.style.background='';
   }
   else
   {
    style.display='none';
    
    Menu6.style.color='';
    Menu6.style.background='';
   }
   break;
 }
}
// Example: obj = findObj("image1");
function findObj(theObj, theDoc)//查找对象函数。
{
  var p, i, foundObj;
 
  if(!theDoc) theDoc = document;
  if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
  {
    theDoc = parent.frames[theObj.substring(p+1)].document;
    theObj = theObj.substring(0,p);
  }
  if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
  for (i=0; !foundObj && i < theDoc.forms.length; i++)
    foundObj = theDoc.forms[i][theObj];
  for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
    foundObj = findObj(theObj,theDoc.layers[i].document);
  if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
 
  return foundObj;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
//-->
</script>

</head>

<body onLoad="iniINF(true);">
<center><div align="center">
<table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="middle"><table width="480" border="0" cellpadding="0" cellspacing="0" class="tablestyle1">
      <tr>
        <td><table width="100%"  border="0" cellspacing="0" cellpadding="0" class="Tdstyle1">
          <tr>
            <td id=Menu1 width="80" height="20" align="center" onMouseUp="showinf('inf1')">银行汇款</td>
            <td id=Menu2 width="80" align="center" onMouseUp="showinf('inf2')">邮局汇款</td>
            <td id=Menu3 width="80" align="center" onMouseUp="showinf('inf3')">网上支付</td>
            <td id=Menu4 width="80" align="center" onMouseUp="showinf('inf4')">电话充值</td>
            <td id=Menu5 width="80" align="center" onMouseUp="showinf('inf5')">手机充值</td>
            <td id=Menu6 width="80" align="center" onMouseUp="showinf('inf6')">U币卡充值</td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td height="200" valign="top" id="inf1"><table width="90%" height="100%"  border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td height="200" valign="middle"><table width="100%"  border="0" cellpadding="0" cellspacing="0" class="inf1">
              <tr>
                <td height="20"><div align="justify">汇款信息：</div></td>
              </tr>
              <tr>
                <td height="20">&nbsp;</td>
              </tr>
              <tr>
                <td height="20"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="70" class="Titledivstyle">开
                      户 银 行</td>
                    <td width="360"><div align="left">：深圳市商业银行XXX支行</div></td>
                  </tr>
                </table></td>
              </tr>
              <tr>
                <td height="20"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="70" class="Titledivstyle">帐
                     &nbsp; 户&nbsp; 名</td>
                    <td><div align="left">：深圳市XXXXXXXXX有限公司</div></td>
                  </tr>
                </table></td>
              </tr>
              <tr>
                <td height="20"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="70" class="Titledivstyle">帐
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 号</td>
                    <td><div align="left">：2326 5665 5669 2233 xxxx
                        xxxx</div></td>
                  </tr>
                </table></td>
              </tr>
              <tr>
                <td height="20">&nbsp;</td>
              </tr>
              <tr>
                <td height="20"><div align="justify">建议大家在银行汇款时……</div></td>
              </tr>
            </table></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td height="200" valign="top" id="inf2"><table width="90%" height="100%"  border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td height="200"><table width="100%"  border="0" cellpadding="0" cellspacing="0" class="inf2">
              <tr>
                <td height="20"><div align="justify">汇款信息：</div></td>
              </tr>
              <tr>
                <td height="20">&nbsp;</td>
              </tr>
              <tr>
                <td height="20"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="70" class="Titledivstyle1">通
                        讯 地 址</td>
                      <td width="360"><div align="left">：深圳市……</div></td>
                    </tr>
                </table></td>
              </tr>
              <tr>
                <td height="20"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="70" class="Titledivstyle">收
                       &nbsp; 款&nbsp; 人</td>
                      <td><div align="left">：深圳市XXXXXXXXX有限公司</div></td>
                    </tr>
                </table></td>
              </tr>
              <tr>
                <td height="20"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="70" class="Titledivstyle">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 编 </td>
                      <td><div align="left">：xxxxxx</div></td>
                    </tr>
                </table></td>
              </tr>
              <tr>
                <td height="20">&nbsp;</td>
              </tr>
              <tr>
                <td height="20"><div align="justify">建议大家在邮局汇款时……</div></td>
              </tr>
            </table></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td height="200" valign="top" id="inf3"><table width="90%" height="100%"  border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td height="200" valign="middle">这是<font color="#FD5A02">“网上支付”</font>的信息。</td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td height="200" valign="top" id="inf4"><table width="90%" height="100%"  border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td height="200" valign="middle">这是<font color="#3C8FEC">“电话充值”</font>的信息。</td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td height="200" valign="top" id="inf5"><table width="90%" height="100%"  border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td height="200" valign="middle">这是<font color="#9E3CE8">“手机充值”</font>的信息。</td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td height="200" valign="top" id="inf6"><table width="90%" height="100%"  border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td height="200" valign="middle">这是<font color="#62A70E">“U币卡充值”</font>的信息。</td>
          </tr>
        </table></td>
      </tr>
    </table>
 </td>
  </tr>
</table>
</div></center>
</body></html> 

ytbada
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值