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

呵呵，类似java se 的tablePanel。
看看效果图：

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 class="menu0" id="menu0">
<li onClick="setTab(0)" class="hover">
<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>