·天新网首页·加入收藏·设为首页·网站导航
数码笔记本手机摄像机相机MP3MP4GPS
硬件台式机网络服务器主板CPU硬盘显卡
办公投影打印传真
家电电视影院空调
游戏网游单机动漫
汽车新车购车试驾
下载驱动源码
学院开发设计
考试公务员高考考研
业界互联网通信探索
您现在的位置:天新网 > 软件开发 > Java开发 > Servlet/JSP
jsp标签页面内的跳转简单实现
http://www.21tx.com 2009年09月16日 javaeye jc_dreaming

  呵呵,类似Java se 的tablePanel。 

  看看效果图: 

jsp标签页面内的跳转简单实现

  图片看不清楚?请点击这里查看原图(大图)。

jsp标签页面内的跳转简单实现

  图片看不清楚?请点击这里查看原图(大图)。

  JSP: 

<form action="" id="f1" name="f1"> 
<input type="hidden" name="servId"> 
<table width="100%" height="100%"><tr> 
<td align="center"> 
<div id="tabs0"> 
<ul id="menu0"> 
<li onClick="setTab(0)"> 
<span> 人员季度考核</span> 
</li> 
<li onClick="setTab(1)" > 
<span> 部门季度考核</span> 
</li> 
<li onClick="setTab(2)" id="l1" style="display:none"> 
<span>考核详细</span> 
</li> 
</ul> 
<div id="tabs1" style="display:"> 
<iframe frameborder="0" src="${ctx }/quarterReportAction.do?dispatch=personQuarterList&noQuery=1&type=1" width="100%" height="100%" 
name="person" id="person" ></iframe> 
</div> 
<div id="tabs2" style="display:"> 
<iframe frameborder="0" src="${ctx }/quarterReportAction.do?dispatch=personQuarterList&noQuery=1&type=2" width="100%" height="100%" 
name="dept" id="dept" ></iframe> 
</div> 
<div id="tabs3" style="display:none"> 
<iframe frameborder="0" src="#" width="100%" height="100%" 
name="info" id="info" ></iframe> 
</div> 
</div> 
</td> 
</tr></table> 
</form> 
JS: 
<script> 
<!-- 
/*点击标签进行页面跳转*/ 
function setTab(m){ 
var tli=document.getElementById("menu0").getElementsByTagName("li"); 
for(i=0;i<tli.length;i++){ 
tli[i].className=i==m?"hover":""; 
} 
switch(m){ 
case 0: 
  document.all.tabs1.style.display=''; 
  document.all.tabs2.style.display='none'; 
  document.all.tabs3.style.display='none'; 
  document.all.l1.style.display='none'; 
  break; 
case 1: 
  document.all.tabs1.style.display='none'; 
  document.all.tabs2.style.display=''; 
  document.all.tabs3.style.display='none'; 
  document.all.l1.style.display='none'; 
  break; 
case 2: 
  document.all.tabs1.style.display='none'; 
  document.all.tabs2.style.display='none'; 
  document.all.tabs3.style.display=''; 
  document.all.l1.style.display=''; 
  break; 
default: 
  document.all.tabs1.style.display=''; 
  document.all.tabs2.style.display='none'; 
  document.all.tabs3.style.display='none'; 
  document.all.l1.style.display='none'; 
  break; 
} 
} 
//--> 
</script>

上一篇: JavaScript中的对象、函数和继承
下一篇: JSP教程:点击链接后下载文件(右键另存)功能

关于我们 | 联系我们 | 加入我们 | 广告服务 | 投诉意见 | 网站导航
Copyright © 2000-2011 21tx.com, All Rights Reserved.
晨新科技 版权所有 Created by TXSite.net