javascript 通用简单的table选项卡实现


Posted in Javascript onMay 07, 2010

第一步:引用table.js

<script type="text/javascript" src="table.js"> </script>

第二步:定义选中的样式,比如“active”,应用选项卡的块的ID,比如“sidebar”,默认被选中的序号,比如第一个“0”;
第三步:调用函数:
<script type="text/javascript"> 
//参数分别为:默认选择项 应用块的id 选中的样式 
table(0, "sidebar", "active") 
</script>

一切OK,选项卡响应click事件,兼任IE和FF,等有时间了再优化,效果如下:
javascript 通用简单的table选项卡实现
HTML源代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>New Web Project</title> 
<script type="text/javascript" src="table.js"> </script> 
<style type="text/css"> 
.sidebar { 
width: 140px; 
background: #C9E4D6; 
min-height: 600px; 
float: left; 
border-left: solid 1px #C8C8C8; 
} 
.sidebar ul { 
list-style:none; 
text-align: left; 
padding: 20px 0px 0px 0px; 
} 
.sidebar ul li { 
border-bottom: 1px dotted #C8C8C8; 
font-size: 14px; 
height: 30px; 
line-height: 30px; 
padding-left: 15px; 
margin-left: 15px; 
cursor: pointer; 
} 
.sidebar .active { 
background: #fff; 
} 
</style> 
</head> 
<body> 
<div class="sidebar" id="sidebar"> 
<ul> 
<li> 
选项一 
</li> 
<li> 
选项二 
</li> 
<li> 
选项三 
</li> 
<li> 
选项四 
</li> 
<li> 
选项五 
</li> 
</ul> 
</div> 
</body> 
<script type="text/javascript"> 
//参数分别为:默认选择项 应用块的id 选中的样式 
table(0, "sidebar", "active") 
</script> 
</html>

table.js
/** 
* @author Sky 
*/ 
var table=function(index,id,active) 
{ 
table=new Table(index,id,active); 
table.bind(); 
} 
var Table=function(index,id,active) 
{ 
this.index=parseInt(index); 
this.arr=document.getElementById(id).getElementsByTagName("li"); 
this.active=active; 
} 
Table.prototype={ 
bind:function() 
{ 
this.arr[this.index].className=this.active;//初始化 
var _self=this; 
for (var i = 0; i < this.arr.length; i++) 
{ 
this.arr[i].setAttribute("ext", i); 
this.arr[i].onclick = function(e) 
{ 
var _e = window.event||e; 
var _target=_e.srcElement || _e.target; 
_self.setClass(parseInt(_target.getAttribute("ext"))); 
} 
} 
}, 
setClass:function(index) 
{ 
this.arr[this.index].className=""; 
this.arr[index].className=this.active; 
this.index=index; 
} 
}

DEMO下载
Javascript 相关文章推荐
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
Angular 数据请求的实现方法
May 07 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 Javascript
jQuery 创建Dom元素
May 07 #Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 #Javascript
jQuery Selector选择器小结
May 06 #Javascript
Jquery 动态添加按钮实现代码
May 06 #Javascript
jquery DOM操作 基于命令改变页面
May 06 #Javascript
JQuery 学习笔记01 JQuery初接触
May 06 #Javascript
Jquery 扩展方法
May 06 #Javascript
You might like
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
JS 面向对象之神奇的prototype
2011/02/26 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
使用Python生成url短链接的方法
2015/05/04 Python
python使用wxpython开发简单记事本的方法
2015/05/20 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
微信公众号token验证失败解决方案
2019/07/22 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
存储过程的优点有哪些
2012/09/27 面试题
奶茶专卖店创业计划书
2014/01/18 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
六个一活动实施方案
2014/03/21 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
2016十一国庆节感言
2015/12/09 职场文书
汽车销售合同文本
2019/08/08 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL