javascript采用数组实现tab菜单切换效果


Posted in Javascript onDecember 12, 2012

最近写了一个tab菜单,这个也算是web2.0的产物了,没什么技术含量,练练手而已.

以下是tab菜单的html结构:
<div id="a"><div id="head"><span id="tab1">vhc</span><span id="tab2">dsdfd</span>..........................<span id="blank"></span></div><div id="body"></div></div>
tab1,tab2就是内容,blank是填充剩下的.body是tab标签对应的内容.

以下是javascript代码:

sx.activex.tabmenu={ 
create:function(t){ 
var a=document.createElement("div"); 
var head=document.createElement("div"); 
var body=document.createElement("div"); 
var blank=document.createElement("span"); 
a.style.height="200px"; 
a.style.width="300px"; 
//a.style.border="1px red solid"; 
head.style.height="15%"; 
//head.style.overflow="hidden"; 
head.style.width="100%"; 
blank.style.width=100-20*t.length+"%"; 
blank.style.height="100%"; 
blank.style.borderBottom="1px red solid"; 
blank.style.lineHeight=parseInt(a.style.height)*0.15+"px";; 
body.innerHTML=t[0][1]; 
body.style.height="85%"; 
body.style.padding="10px"; 
body.style.border="1px red solid"; 
body.style.borderTop="0px"; 
for(var i=0;i<t.length;i++){ 
var tab=document.createElement("span"); 
tab.style.border="1px red solid"; 
tab.style.width="20%"; 
tab.style.lineHeight=parseInt(a.style.height)*0.15+"px"; 
tab.style.textAlign="center"; 
tab.style.height="100%"; 
tab.style.backgroundColor="yellow"; 
tab.style.cursor="hand"; 
tab.innerHTML=t[i][0]; 
tab.onclick=function(r){ 
return function(){ 
for(var i1 in head.all){ 
if(head.all[i1]!=this && head.all[i1].tagName=="SPAN") 
head.all[i1].style.borderBottom="1px red solid"; 
this.style.borderBottom="0px"; } 
body.innerHTML=t[r][1]; 
} 
}(i); 
head.appendChild(tab);; 
} 
head.firstChild.style.borderBottom="0px"; 
head.appendChild(blank); 
a.appendChild(head); 
a.appendChild(body); 
return a; 
} 
}

传入的参数t是一个二维数组,里面是一个标签题目和标签内容的形式,调用方式如下:
<html> 
<head> 
<title>Untitled Document</title> 
</head> 
<body> <script src="kongjian.js"></script> 
<script> 
var a=sx.activex.tabmenu.create([["asd","wewfrwefwe"],["we","dsfsdfsdf"]]); 
document.body.appendChild(a); 
</script> 
</body> 
</html>

差不多完成了,有兴趣的朋友可以去测试下.
Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
canvas绘制环形进度条
Feb 23 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
jQuery实现本地存储
Dec 22 jQuery
javascript仿qq界面的折叠菜单实现代码
Dec 12 #Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 #Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 #Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 #Javascript
用js判断页面是否加载完成实现代码
Dec 11 #Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 #Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 #Javascript
You might like
PHP对象Object的概念 介绍
2012/06/14 PHP
10 个经典PHP函数
2013/10/17 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
curl和libcurl的区别简介
2015/07/01 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
python实现Zabbix-API监控
2018/09/17 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
商务邀请函范文
2014/01/14 职场文书
安全生产目标责任书
2014/04/14 职场文书
《菜园里》教学反思
2014/04/17 职场文书
公民代理授权委托书
2014/09/24 职场文书
骨干教师个人总结
2015/02/11 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript