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整除实现代码
Nov 23 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
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
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
初识PHP
2014/09/28 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
DWR Ext 加载数据
2009/03/22 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
详解Vue的ref特性的使用
2020/01/24 Javascript
python抓取网页图片示例(python爬虫)
2014/04/27 Python
python实现字符串和日期相互转换的方法
2015/05/13 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
提高python代码运行效率的一些建议
2020/09/29 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
医院实习介绍信
2014/01/12 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
平安校园建设方案
2014/05/02 职场文书
服务承诺书范文
2014/05/19 职场文书
酒店管理求职信
2014/06/09 职场文书
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL