javascript 通用简单的table选项卡实现
更新时间：2010年05月07日 17:21:55 作者：
鉴于UI妹妹每次交付过来的选项卡都夹带了多多少少的js，而且每遇到选项卡就加一点js，造成垃圾低劣代码逐渐堆积过多了，一直想做一个通用简洁的选项卡库。
第一步：引用table.js
第二步：定义选中的样式，比如“active”，应用选项卡的块的ID，比如“sidebar”，默认被选中的序号，比如第一个“0”；
第三步：调用函数：
一切OK，选项卡响应click事件，兼任IE和FF，等有时间了再优化，效果如下：
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下载
复制代码 代码如下:
<script type="text/javascript" src="table.js"> </script>
第二步：定义选中的样式，比如“active”，应用选项卡的块的ID，比如“sidebar”，默认被选中的序号，比如第一个“0”；
第三步：调用函数：
复制代码 代码如下:
<script type="text/javascript">
//参数分别为：默认选择项 应用块的id 选中的样式
table(0, "sidebar", "active")
</script>
//参数分别为：默认选择项 应用块的id 选中的样式
table(0, "sidebar", "active")
</script>
一切OK，选项卡响应click事件，兼任IE和FF，等有时间了再优化，效果如下：
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取得传递参数的个数的代码...2007-10-10
本篇文章主要介绍了如何用webpack打包一个网站应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
Nick Justice是GitHub开发者计划的一员。早在ES6语言标准发布之前，他就借助像Babel这样的转译器以及最新版本的浏览器在自己的项目中使用ES6特性。他认为，ES6的新特性将极大地改变JavaScript的编写方式2016-03-03
这篇文章主要介绍了JS Array.slice 截取数组的实现方法,因为我们需要控制一下长度，需要的朋友可以参考下2016-01-01
这篇文章主要介绍了JS实现完全语义化的网页选项卡效果代码,可实现基于鼠标滑过及点击的选项卡切换效果,非常具有实用价值,需要的朋友可以参考下2015-09-09
经理交给我一个网站新闻资讯网页开发的活儿，对于我这样的java程序员，没有接触过网页设计这么高端的东东，该怎么搞呢，去度娘那搜索到不少结果，而且很大部分都是用jquery做的，于是根据自己的一些的理解，提供了这篇jquery轮播效果的讲解，有需要的朋友可以来参考下2015-08-08
这篇文章主要介绍了js+HTML5实现canvas多种颜色渐变效果的方法,涉及html5属性的相关技巧,需要的朋友可以参考下2015-06-06
JavaScript在ES6版本后提供了一些更加便捷的方法供开发者使用,实现原理其实是在对应的构造函数原型提供方法,下面这篇文章主要给大家介绍了关于es6中some和every方法使用的相关资料,需要的朋友可以参考下2023-04-04
今天小编就为大家分享一篇layui操作列按钮个数和文字颜色的判断实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
下面小编就为大家带来一篇JS两个数组比较,删除重复值的巧妙方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
最新评论