Maison > interface Web > js tutoriel > javascript 通用简单的table选项卡实现_javascript技巧

javascript 通用简单的table选项卡实现_javascript技巧

WBOY
Libérer: 2016-05-16 18:27:59
original
1132 Les gens l'ont consulté
第一步:引用table.js
复制代码 代码如下:

第二步:定义选中的样式,比如“active”,应用选项卡的块的ID,比如“sidebar”,默认被选中的序号,比如第一个“0”;
第三步:调用函数:
复制代码 代码如下:


一切OK,选项卡响应click事件,兼任IE和FF,等有时间了再优化,效果如下:
javascript 通用简单的table选项卡实现_javascript技巧
HTML源代码如下:
复制代码 代码如下:





New Web Project









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[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下载
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal