Chinaunix首页 | 论坛 | 博客

ZJU2011_shark的ChinaUnix博客

首页　| 　博文目录　| 　关于我

ZJU2011_shark

  • 博客访问： 334840
  • 博文数量： 329
  • 博客积分： 2633
  • 博客等级： 少校
  • 技术积分： 3633
  • 用 户 组： 普通用户
  • 注册时间： 2011-04-22 15:43
文章分类

全部博文（329）

文章存档

2013年（244）

2012年（46）

2011年（39）

我的朋友
最近访客
推荐博文
jsp页面实现标签页的效果

分类：

2011-08-07 16:41:34

用变换显示div的方法实现标签页的效果。







javascript用：
  1. <script type="text/javascript">
  2.   function showXttx(){
  3.      document.getElementById("divDxls").style.display="none";
  4.      document.getElementById("divGxdz").style.display="none";
  5.      document.getElementById("divXttx").style.display="";
  6.      parent.showXttx();
  7.     
  8.   }
  9.   function showDxls(){
  10.      document.getElementById("divDxls").style.display="";
  11.      document.getElementById("divGxdz").style.display="none";
  12.      document.getElementById("divXttx").style.display="none";
  13.      parent.showDxls();
  14.   }
  15.   function showGxdz(){
  16.      document.getElementById("divDxls").style.display="none";
  17.      document.getElementById("divGxdz").style.display="";
  18.      document.getElementById("divXttx").style.display="none";
  19.      parent.showUserSetting();
  20.   }
  21. </script>
jsp中写入：
  1. <body leftmargin=0 topmargin=0 >
  2. <div id="divXttx" style="">
  3. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  4.   <tr>
  5.   <td width="90" height="24" align="center" valign="middle">
  6.        <table width="80" border="0" cellspacing="0" cellpadding="0">
  7.               <tr>
  8.                 <td width="24" align="center" valign="middle"><img src="<%=s.get("img") %>/images/jyb/cm/application_edit (2).png" alt="" width="16" height="16" /></td>
  9.                 <td align="left" valign="middle"><span class="ann">协同通讯</span></td>
  10.               </tr>
  11.             </table></td>
  12.             <td width="1" bgcolor="#7492B1"></td>
  13.             <td width="89" align="center" valign="middle" style="cursor:pointer" onclick="showDxls()" background="<%=s.get("img") %>/images/jyb/cm/bj0727.png"><table width="80" border="0" cellspacing="0" cellpadding="0">
  14.               <tr>
  15.                 <td width="24" align="center" valign="middle"><img src="<%=s.get("img") %>/images/jyb/cm/book_open (2).png" alt="" width="16" height="16" /></td>
  16.                 <td align="left" valign="middle"><span class="ann">短信历史</span></td>
  17.               </tr>
  18.             </table></td>
  19.             <td width="1" bgcolor="#7492B1"></td>
  20.             <td width="89" align="center" valign="middle" style="cursor:pointer" onclick="showGxdz()" background="<%=s.get("img") %>/images/jyb/cm/bj0727.png"><table width="80" border="0" cellspacing="0" cellpadding="0">
  21.               <tr>
  22.                 <td width="24" align="center" valign="middle"><img src="<%=s.get("img") %>/images/jyb/cm/application_view_tile (2).png" alt="" width="16" height="16" /></td>
  23.                 <td align="left" valign="middle"><span class="ann">个性定制</span></td>
  24.                 </tr>
  25.             </table></td>
  26.             <td width="1" bgcolor="#7492B1"></td>
  27.          <td width="*" bgcolor="#F2F2F2">&nbsp;</td>
  28.             </tr>
  29.           <tr>
  30.             <td height="1" bgcolor="#FFFFFF"></td>
  31.             <td height="1" bgcolor="#7492B1"></td>
  32.             <td height="1" bgcolor="#7492B1"></td>
  33.             <td height="1" bgcolor="#7492B1"></td>
  34.             <td height="1" bgcolor="#7492B1"></td>
  35.             <td bgcolor="#7492B1"></td>
  36.             <td bgcolor="#7492B1"></td>
  37.             </tr>
  38.         </table>
  39.         
  40.         </div>




  45. <div id="divDxls" style="display:none">
  46. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  47.   <tr>
  48.   <td width="90" height="24" align="center" valign="middle" style="cursor:pointer" onclick="showXttx()" background="<%=s.get("img") %>/images/jyb/cm/bj0727.png">
  49.        <table width="80" border="0" cellspacing="0" cellpadding="0">
  50.               <tr>
  51.                 <td width="24" align="center" valign="middle"><img src="<%=s.get("img") %>/images/jyb/cm/application_edit (2).png" alt="" width="16" height="16" /></td>
  52.                 <td align="left" valign="middle"><span class="ann">协同通讯</span></td>
  53.               </tr>
  54.             </table></td>
  55.             <td width="1" bgcolor="#7492B1"></td>
  56.             <td width="89" align="center" valign="middle"><table width="80" border="0" cellspacing="0" cellpadding="0">
  57.               <tr>
  58.                 <td width="24" align="center" valign="middle"><img src="<%=s.get("img") %>/images/jyb/cm/book_open (2).png" alt="" width="16" height="16" /></td>
  59.                 <td align="left" valign="middle"><span class="ann">短信历史</span></td>
  60.               </tr>
  61.             </table></td>
  62.             <td width="1" bgcolor="#7492B1"></td>
  63.             <td width="89" align="center" valign="middle" style="cursor:pointer" onclick="showGxdz()" background="<%=s.get("img") %>/images/jyb/cm/bj0727.png"><table width="80" border="0" cellspacing="0" cellpadding="0">
  64.               <tr>
  65.                 <td width="24" align="center" valign="middle"><img src="<%=s.get("img") %>/images/jyb/cm/application_view_tile (2).png" alt="" width="16" height="16" /></td>
  66.                 <td align="left" valign="middle"><span class="ann">个性定制</span></td>
  67.                 </tr>
  68.             </table></td>
  69.             <td width="1" bgcolor="#7492B1"></td>
  70.          <td width="*" bgcolor="#F2F2F2">&nbsp;</td>
  71.             </tr>
  72.           <tr>
  73.             <td height="1" bgcolor="#7492B1"></td>
  74.             <td height="1" bgcolor="#7492B1"></td>
  75.             <td height="1" bgcolor="#FFFFFF"></td>
  76.             <td height="1" bgcolor="#7492B1"></td>
  77.             <td height="1" bgcolor="#7492B1"></td>
  78.             <td bgcolor="#7492B1"></td>
  79.             <td bgcolor="#7492B1"></td>
  80.             </tr>
  81.         </table>
  82.         
  83.         </div>





  89. <div id="divGxdz" style="display:none">
  90. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  91.   <tr>
  92.           <td width="90" height="24" align="center" valign="middle" style="cursor:pointer" onclick="showXttx()" background="<%=s.get("img") %>/images/jyb/cm/bj0727.png">
  93.                <table width="80" border="0" cellspacing="0" cellpadding="0">
  94.               <tr>
  95.                 <td width="24" align="center" valign="middle"><img src="<%=s.get("img") %>/images/jyb/cm/application_edit (2).png" alt="" width="16" height="16" /></td>
  96.                 <td align="left" valign="middle"><span class="ann">协同通讯</span></td>
  97.               </tr>
  98.             </table>
  99.         </td>
  100.         <td width="1" bgcolor="#7492B1"></td>
  101.         <td width="89" align="center" valign="middle" style="cursor:pointer" onclick="showDxls()" background="<%=s.get("img") %>/images/jyb/cm/bj0727.png">
  102.             <table width="80" border="0" cellspacing="0" cellpadding="0">
  103.               <tr>
  104.                 <td width="24" align="center" valign="middle"><img src="<%=s.get("img") %>/images/jyb/cm/book_open (2).png" alt="" width="16" height="16" /></td>
  105.                 <td align="left" valign="middle"><span class="ann">短信历史</span></td>
  106.               </tr>
  107.             </table>
  108.         </td>
  109.         <td width="1" bgcolor="#7492B1"></td>
  110.         
  111.         <td width="89" align="center" valign="middle" bgcolor="#FFFFFF">
  112.           <table width="80" border="0" cellspacing="0" cellpadding="0">
  113.               <tr>
  114.                 <td width="24" align="center" valign="middle"><img src="<%=s.get("img") %>/images/jyb/cm/application_view_tile (2).png" alt="" width="16" height="16" /></td>
  115.                 <td align="left" valign="middle"><span class="ann">个性定制</span></td>
  116.                 </tr>
  117.             </table>
  118.          </td>
  119.          <td width="1" bgcolor="#7492B1"></td>
  120.          <td width="*" bgcolor="#F2F2F2">&nbsp;</td>
  121.    </tr>
  122.           <tr>
  123.             <td height="1" bgcolor="#7492B1"></td>
  124.             <td bgcolor="#7492B1"></td>
  125.             <td bgcolor="#7492B1"></td>
  126.             <td bgcolor="#7492B1"></td>
  127.             <td bgcolor="#FFFFFF"></td>
  128.             <td bgcolor="#7492B1"></td>
  129.             <td bgcolor="#7492B1"></td>
  130.             
  131.             </tr>
  132.         </table>
  133.         
  134.         </div>
  135. </body>




阅读(2543) | 评论(0) | 转发(0) |
0

上一篇：在action中执行javascript代码

下一篇：初学SQL server2005中用存储过程和触发器

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6