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　id="menu0">　
<li　>　
<span>　人员季度考核</span>　
</li>　
<li　　>　
<span>　部门季度考核</span>　
</li>　
<li　　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>