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 相关文章推荐
js查找父节点的简单方法
Jun 28 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
javascript求日期差的方法
Mar 02 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
validform表单验证的实现方法
Mar 08 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
微信小程序实现搜索功能
Mar 10 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中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
javascript parseInt 大改造
2009/09/27 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
JS中表单的使用小结
2014/01/11 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
python选择排序算法的实现代码
2013/11/21 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
大学生英文求职信范文
2015/03/19 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript