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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 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基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
php格式化电话号码的方法
2015/04/24 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
python中常见错误及解决方法
2020/06/21 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
民间个人借款协议书
2014/09/30 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
纪委立案决定书
2015/06/24 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
python中os.path.join()函数实例用法
2021/05/26 Python
使用refresh_token实现无感刷新页面
2022/04/26 Javascript