js tab效果的实现代码


Posted in Javascript onDecember 26, 2009

预实现效果:(点击不同的tab显示不同面板内容)

js tab效果的实现代码
 一:用到的js函数:

<script language="javascript" type="text/javascript" > 
//变换tab函数 
//原则,外层div里含有内层多个div 
function tabPanelEx(trThis,urlImgNormal,urlImgPoint,tabs,tabid){ 
var tds=trThis.parentNode.children; 
for(var i=0;i<tds.length;i++) 
{ 
if(tds[i].attributes["ex"]) 
{ 
tds[i].style.backgroundImage="url("+urlImgNormal+")"; 
} 
} 
trThis.style.backgroundImage="url("+urlImgPoint+")"; 
//div control 
var vtabs=document.getElementById(tabs).children; 
for(var j=0;j<vtabs.length;j++) 
{ 
vtabs[j].style.display="none"; 
} 
document.getElementById(tabid).style.display="block"; 
} 
</script>

二:页面调用代码;
代码
<table width="768" border="0" cellspacing="0" cellpadding="0"> 
<!-- tab上方按钮行 --> 
<tr valign="bottom"> 
<td height="37" background="../images/a_06.jpg"> 
<table border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="16" height="32" valign="bottom"></td> 
<td ex="true" width="94" height="32" align="right" valign="middle" background="../images/an_01.jpg" style="cursor:pointer" 
onClick="tabPanelEx(this,'../images/an_02.jpg','../images/an_01.jpg','newTabs','newsTab1')"> 
<div style="width:72px;height:28px;line-height:28px;text-align:left;" class="bllb14">全员教育 </div></td> 
<td width="7" height="32"></td> 
<td ex="true" width="94" height="32" align="right" valign="middle" background="../images/an_02.jpg" style="cursor:pointer" 
onClick="tabPanelEx(this,'../images/an_02.jpg','../images/an_01.jpg','newTabs','newsTab2')" > 
<div style="width:72px;height:28px;line-height:28px;text-align:left;" class="bllb14">医界动态 </div></td> 
</tr> 
</table> 
</td> 
</tr> 
<!-- 间隙 --> 
<tr> 
<td height="5" align="center"></td> 
</tr> 
<!-- 对应内容 --> 
<tr> 
<td align="center"> 
<div id="newTabs"> 
<div id="newsTab1"> 
<table width="768" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="384" height="240" align="left" valign="top"><p>全员教育</p> 
</td> 
<td width="1" height="240" background="../images/a_07.jpg"></td> 
<td width="384" height="240" align="right" valign="top">全员教育</td> 
</tr> 
</table> 
</div> 
<div id="newsTab2" style="display:none"> 
<table width="768" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="384" height="240" align="left" valign="top">医界动态</td> 
<td width="1" height="240" background="../images/a_07.jpg"></td> 
<td width="384" height="240" align="right" valign="top">医界动态</td> 
</tr> 
</table> 
</div> 
</div> 
</td> 
</tr> 
</table>

调用解释:
(1)使用的为table,table结构为:
代码
<table width="768" border="0" cellspacing="0" cellpadding="0"> 
<!-- tab上方按钮行 --> 
<tr valign="bottom"> 
<td 第一行菜单 tab> 
<table border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td 调用onClick="tabPanelEx(this,'../images/an_02.jpg','../images/an_01.jpg','newTabs','newsTab1')" 显示newTabs内的newsTab1> 
<div style="width:72px;height:28px;line-height:28px;text-align:left;" class="bllb14">全员教育 </div></td> 
<td 调用onClick="tabPanelEx(this,'../images/an_02.jpg','../images/an_01.jpg','newTabs','newsTab2')" 显示newTabs内的newsTab2> 
<div style="width:72px;height:28px;line-height:28px;text-align:left;" class="bllb14">医界动态 </div></td> 
</table> 
</td> 
</tr> 
<!-- 间隙 --> 
<tr> 
<td height="5" align="center"></td> 
</tr> 
<!-- 对应内容 --> 
<tr> 
<td align="center"> 
<div id="newTabs"> 
<div id="newsTab1"> 
全员教育 
</div> 
<div id="newsTab2" style="display:none"> 
医界动态 
</div> 
</div> 
</td> 
</tr> 
</table>

完整文件下载
Javascript 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 Javascript
canvas 中如何实现物体的框选
Aug 05 Javascript
javascript 计算两个整数的百分比值
Dec 26 #Javascript
用Javascript同时提交多个Web表单的方法
Dec 26 #Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 #Javascript
javascript 处理事件绑定的一些兼容写法
Dec 24 #Javascript
Javascript 键盘keyCode键码值表
Dec 24 #Javascript
JQuery与iframe交互实现代码
Dec 24 #Javascript
jquery 弹出登录窗口实现代码
Dec 24 #Javascript
You might like
php 生成饼图 三维饼图
2009/09/28 PHP
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
python字符串过滤性能比较5种方法
2017/06/22 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
深入浅析Python中的迭代器
2019/06/04 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
python遍历路径破解表单的示例
2020/11/21 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
员工廉洁自律承诺书
2014/05/26 职场文书
订货会主持词
2015/07/01 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python