腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

javascript 通用簡(jiǎn)單的table選項(xiàng)卡實(shí)現(xiàn)

更新時(shí)間：2010年05月07日 17:21:55 作者：

鑒于UI妹妹每次交付過來的選項(xiàng)卡都夾帶了多多少少的js，而且每遇到選項(xiàng)卡就加一點(diǎn)js，造成垃圾低劣代碼逐漸堆積過多了，一直想做一個(gè)通用簡(jiǎn)潔的選項(xiàng)卡庫。

第一步：引用table.js

復(fù)制代碼代碼如下:

第二步：定義選中的樣式，比如“active”，應(yīng)用選項(xiàng)卡的塊的ID，比如“sidebar”，默認(rèn)被選中的序號(hào)，比如第一個(gè)“0”；
第三步：調(diào)用函數(shù)：

復(fù)制代碼代碼如下:

<script type="text/javascript"> 
//參數(shù)分別為：默認(rèn)選擇項(xiàng) 應(yīng)用塊的id 選中的樣式 
table(0, "sidebar", "active") 
</script> 

一切OK，選項(xiàng)卡響應(yīng)click事件，兼任IE和FF，等有時(shí)間了再優(yōu)化，效果如下：

HTML源代碼如下：

復(fù)制代碼代碼如下:

 
<!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> 
選項(xiàng)一 
</li> 
<li> 
選項(xiàng)二 
</li> 
<li> 
選項(xiàng)三 
</li> 
<li> 
選項(xiàng)四 
</li> 
<li> 
選項(xiàng)五 
</li> 
</ul> 
</div> 
</body> 
<script type="text/javascript"> 
//參數(shù)分別為：默認(rèn)選擇項(xiàng) 應(yīng)用塊的id 選中的樣式 
table(0, "sidebar", "active") 
</script> 
</html> 

table.js

復(fù)制代碼代碼如下:

 
/** 
* @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; 
} 
} 