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 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
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
如何删除多级目录
2006/10/09 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
python实现读Excel写入.txt的方法
2018/04/29 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
django fernet fields字段加密实践详解
2019/08/12 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
三个Unix的命令面试题
2015/04/12 面试题
业务员的岗位职责
2014/03/15 职场文书
党员创先争优承诺书
2014/03/26 职场文书
金融保险专业求职信
2014/09/03 职场文书
国庆节标语大全
2014/10/08 职场文书
如何利用python实现列表嵌套字典取值
2022/06/10 Python