首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

打造Tab菜单

2012-11-01 
制作Tab菜单在制作Tab菜单时,网上都有自己的一套制作方法,就是用现成的SpryTabbedPanels.js和SpryTabbedPa

制作Tab菜单
在制作Tab菜单时,网上都有自己的一套制作方法,就是用现成的SpryTabbedPanels.js和SpryTabbedPanels.css,这两个文件在网上可以搜索到,下面是我自己制作的一个简单实用的Tab菜单,代码如下:

<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>中添加onload="javascript:displayTab()"方法,这里控制需要加载具体的哪个Tab,显示结果的页面可以单独做个JSP,然后用标签<jsp:include flush="true" page="tLfqmSearchList.jsp"></jsp:include>或<%@include file="tLfqmSearchJS.jsp" flush="true"%>引入即可。
参看文件可以下载。

热点排行