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 相关文章推荐
javascript 类型判断代码分析
Mar 28 Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
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与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
读jQuery之二(两种扩展)
2011/06/11 Javascript
JavaScript 数组详解
2013/10/10 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
Python中asyncore的用法实例
2014/09/29 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
django在开发中取消外键约束的实现
2020/05/20 Python
python如何求圆的面积
2020/07/01 Python
意大利奢侈品网站:Italist
2016/08/23 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
元旦晚会活动总结
2014/07/09 职场文书
青年志愿者活动方案
2014/08/17 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
安全保证书格式
2015/02/28 职场文书
入党培养人考察意见
2015/06/08 职场文书
户外拓展训练感想
2015/08/07 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python