在制作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"%>引入即可。
参看文件可以下载。
分享到:
相关推荐
一个用js制作tab菜单
NULL 博文链接:https://xiaofengtoo.iteye.com/blog/1186834
精美的仿网易tab菜单制作 css 代码。
tab菜单制作案例tab菜单制作案例tab菜单制作案例 tab菜单制作案例 tab菜单制作案例 tab菜单制作案例
这也是一款用CSS3制作的Tab菜单,菜单的外观很普通,没什么特别,但却十分简单大气。利用CSS3的特性,每一个Tab标签都是圆角的,这让整一个Tab菜单显得相对比较圆润,也更具有立体视觉效果。另外,Tab标签在切换时,...
NULL 博文链接:https://niunan.iteye.com/blog/278962
JS 制作的她tab菜单 很不错哦!
HTML制作多级菜单_一级下拉菜单+二三级选项卡tab-移动到菜单上就切换选项卡.zip
蓝色的TAB菜单,代码比较容易学习,你可以了解下UI与LI的切换原理!
你想做出好看的菜单吗?那就是这个软件了,包含了各种各样的漂亮的菜单
解压密码:RJ4587 这是一款基于SVG和CSS3的动画Tab菜单插件,菜单图标使用SVG绘制而成,菜单切换时还会产生不错的动画效果。菜单项小图标使用svg的好处,不仅在于灵活绘制,更方便制作菜单项切换时图标的动画特效。...
CSS3淡入淡出Tab菜单是一款用CSS3制作的Tab菜单,菜单的外观很普通,没什么特别,但却十分简单大气。利用CSS3的特性,每一个Tab标签都是圆角的,这让整一个Tab菜单显得相对比较圆润,也更具有立体视觉效果。另外,...
CSS3华丽的Tab菜单 带小图标动画 CSS3精美小图标菜单导航 CSS3飘带状3D菜单 菜单带小图标 CSS3响应式面包屑菜单 jQuery动画二级下拉菜单 纯CSS3立体动画菜单 菜单项按下有内阴影 基于Bootstrap的CSS3下拉菜单
此工具可以制作各种各样的绚丽的菜单导航,很不错哦
Android TAB菜单,仿engadget导航切换菜单效果,其实就是一个TAB,这个相信大家都比较熟悉了,在电脑上和Android、IOS系统中都很常见。。这个菜单基本能用了,不过制作过程中,还是有一些疑惑的,比如当tab点击后,...
经过测试没有问题!自己手动制作的 包含css+ajax PHP调用mysql获取的测试数据,有能力可以自己换种编程语言。
网易滑动门TAB导航菜单 ! 很值得下载看看!资源免费,大家分享!!
一个很好的css导航菜单制作工具 一个很好的css导航菜单制作工具 一个很好的css导航菜单制作工具