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一些题目的解析
Dec 25 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
JavaScript动态生成表格的示例
Nov 02 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
默默简单的写了一个模板引擎
2007/01/02 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
Collection和Collections的区别
2016/05/02 面试题
销售工作人员的自我评价分享
2013/11/10 职场文书
土木建筑学生自我评价
2014/01/14 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers