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 相关文章推荐
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
详解ES6中class的实现原理
Oct 03 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
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
PHP生成随机密码类分享
2014/06/25 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
PHP安全下载文件的方法
2016/04/07 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
编辑浪子版表单验证类
2007/05/12 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
Python Trie树实现字典排序
2014/03/28 Python
Python内置函数OCT详解
2016/11/09 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
python实现查找所有程序的安装信息
2020/02/18 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
悬挂训练绳:TRX
2017/12/14 全球购物
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
自荐信格式
2013/12/01 职场文书
租房协议书样本
2014/08/20 职场文书
党委班子剖析材料
2014/08/21 职场文书
房屋出租委托书格式
2014/09/23 职场文书
导游词之包公祠
2019/11/25 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python