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 drag拖动代码
Dec 09 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
js获取内联样式的方法
Jan 27 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
vue实现2048小游戏功能思路详解
May 09 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 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里的JS打印函数
2006/10/09 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
详解原生js实现offset方法
2017/06/15 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
Python写的英文字符大小写转换代码示例
2015/03/06 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
python调试神器PySnooper的使用
2019/07/03 Python
详解python中eval函数的作用
2019/10/22 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
美国零售商店:Blue&Cream
2017/04/07 全球购物
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
机关党员四风问题个人整改措施
2014/10/26 职场文书
给老婆道歉的话
2015/01/20 职场文书
单身证明范本
2015/06/15 职场文书
比赛口号霸气押韵
2015/12/24 职场文书