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文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 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 simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
js获得鼠标的坐标值的方法
2013/03/13 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
Atom的python插件和常用插件说明
2018/07/08 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
python线程join方法原理解析
2020/02/11 Python
如何用Python徒手写线性回归
2021/01/25 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
大韩航空官方网站:Korean Air
2017/10/25 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
九月份红领巾广播稿
2014/01/22 职场文书
八项规定整改措施
2014/02/12 职场文书
小学亲子活动总结
2014/07/01 职场文书
最新离婚协议书范本
2014/08/19 职场文书
社会实践活动总结
2015/02/05 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
公司周年庆典致辞
2015/07/30 职场文书