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的eval JSON object问题
Nov 15 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
Js和VUE实现跑马灯效果
May 25 Javascript
浅谈Vue的computed计算属性
Mar 21 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
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
PHP网站基础优化方法小结
2008/09/29 PHP
php 抽象类的简单应用
2011/09/06 PHP
php批量上传的实现代码
2013/06/09 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
php微信开发之关注事件
2018/06/14 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
Python中规范定义命名空间的一些建议
2016/06/04 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
公司新年寄语
2014/04/04 职场文书
爱心捐助倡议书
2014/05/19 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
干部个人对照检查材料
2014/08/25 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
土建施工员岗位职责
2015/04/11 职场文书
心理学培训心得体会
2016/01/22 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript