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 Prototype对象
Jan 07 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
了解一点js的Eval函数
Jul 26 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
layui实现动态和静态分页
Apr 28 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
微信小程序实现授权登录
May 15 Javascript
vue 封装面包屑组件教程
Nov 16 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 常见郁闷问题答解
2006/11/25 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
基于php伪静态的实现详细介绍
2013/04/28 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
ExtJS 入门
2010/10/29 Javascript
JavaScript 的继承
2011/10/01 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
python实现的登录和操作开心网脚本分享
2014/07/09 Python
python开发简易版在线音乐播放器
2017/03/03 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
总经理岗位职责
2013/11/09 职场文书
自荐信封面
2013/12/04 职场文书
亲子读书活动方案
2014/02/22 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
争先创优个人总结
2015/03/04 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
Nebula Graph解决风控业务实践
2022/03/31 MySQL
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android