在制作Tab菜单时，网上都有自己的一套制作方法，就是用现成的SpryTabbedPanels.js和SpryTabbedPanels.css，这两个文件在网上可以搜索到，下面是我自己制作的一个简单实用的Tab菜单，代码如下：
以下是js控制代码：
在这里可以自己加上一些CSS样式。
在Tab面板中显示查询条件，在下方显示查询出来的记录，这里如果用到了Ajax技术当然好，如果没有用到的时候需要在当前页面的<body>中添加οnlοad="javascript:displayTab()"方法，这里控制需要加载具体的哪个Tab,显示结果的页面可以单独做个JSP，然后用标签<jsp:include flush="true" page="tLfqmSearchList.jsp"></jsp:include>或<%@include file="tLfqmSearchJS.jsp" flush="true"%>引入即可。
参看文件可以下载。
<body onload="javascript:displayTab()">
<div>
<div class='tabnav'>
<ul>
<li id='tab1' onclick='tab(1)'>TAB1</li>
<li id='tab2' onclick='tab(2)'>TAB2</li>
</ul>
</div>
<div id='tabid1' class='tabid'>tab1</div>
<div id='tabid2' class='tabid' style='display:none;'>tab2</div>
</div>
</body>
以下是js控制代码：
<script language='javascript'>
function tab(n){
var tabnav="tab"+n;
var tabid="tabid"+n;
cleardisplay();
document.getElementById(tabid).style.display="block";
}
function cleardisplay(){
for (i=1;i<3;i++)
{
var cleartabid="tabid"+i;
document.getElementById(cleartabid).style.display="none";
}
}
</script>
在这里可以自己加上一些CSS样式。
在Tab面板中显示查询条件，在下方显示查询出来的记录，这里如果用到了Ajax技术当然好，如果没有用到的时候需要在当前页面的<body>中添加οnlοad="javascript:displayTab()"方法，这里控制需要加载具体的哪个Tab,显示结果的页面可以单独做个JSP，然后用标签<jsp:include flush="true" page="tLfqmSearchList.jsp"></jsp:include>或<%@include file="tLfqmSearchJS.jsp" flush="true"%>引入即可。
参看文件可以下载。
1633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
