javascript之通用簡單的table選項卡實現(二)

2019-11-21 00:31:17

字體：大中小

來源：轉載

供稿：網友

回歸原始，當樣式切換后，把控制權還給頁面，即table.js僅控制切換樣式和記錄操作：

 
<!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> 
<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; 
} 
.content{ 
height:600px; 
width:400px; 
border-right:1px solid #ccc; 
margin-left:140px; 
padding:20px; 
display:none; 
} 
</style> 
</head> 
<body> 
<div class="sidebar" id="sidebar"> 
<ul> 
<li point="table1"> 
選項一 
</li> 
<li point="table2"> 
選項二 
</li> 
<li point="table3"> 
選項三 
</li> 
<li point="table4"> 
選項四 
</li> 
<li point="table5"> 
選項五 
</li> 
</ul> 
</div> 
<div id="table1" class="content"> 
這是第一個選項卡的內容 
</div> 
<div id="table2" class="content"> 
這是第二個選項卡的內容 
</div> 
<div id="table3" class="content"> 
這是第三個選項卡的內容 
</div> 
<div id="table4" class="content"> 
這是第四個選項卡的內容 
</div> 
<div id="table5" class="content"> 
這是第五個選項卡的內容 
</div> 
</body> 
<script type="text/javascript" src="table.js"> </script> 
<script type="text/javascript"> 
//回調函數 可用參數：obj.lastIndex(上次選項索引) obj.index(當前選項索引) obj.arr(選項卡元素數組) 
var back=function(obj) 
{ 
var lastPoint=obj.arr[obj.lastIndex].getAttribute("point"); 
var curentPoint=obj.arr[obj.index].getAttribute("point"); 
document.getElementById(lastPoint).style.display="none"; 
document.getElementById(curentPoint).style.display="block"; 
} 
//參數分別為：選項塊ID 選中的樣式 回調函數 默認選擇項（0開始） 
table("sidebar", "active",back,0); 
</script> 
</html> 

復制代碼代碼如下:

 
//回調函數 可用參數：obj.lastIndex(上次選項索引) obj.index(當前選項索引) obj.arr(選項卡元素數組) 
var back=function(obj) 
{ 
var lastPoint=obj.arr[obj.lastIndex].getAttribute("point"); 
var curentPoint=obj.arr[obj.index].getAttribute("point"); 
document.getElementById(lastPoint).style.display="none"; 
document.getElementById(curentPoint).style.display="block"; 
} 
//參數分別為：選項塊ID 選中的樣式 回調函數 默認選擇項（0開始） 
table("sidebar", "active",back,0); 

table.js代碼如下：

復制代碼代碼如下:

 
/** 
* @author Sky 
*/ 
var table=function(id,active,callBack,index) 
{ 
table[id]=new Table(id,active,callBack,index); 
table[id].bind(); 
} 
var Table=function(id,active,callBack,index) 
{ 
this.index=parseInt(index)||0;//當前索引 
this.lastIndex=this.index;//上次索引 
this.callBack=callBack||function(){}; 
this.active=active||"active"; 
this.id=id; 
this.arr=document.getElementById(id).getElementsByTagName("li"); 
} 
Table.prototype={ 
bind:function() 
{ 
//初始化選項樣式 
this.setTable(this.index); 
//綁定事件 
var _self=this; 
for (var i = 0; i < this.arr.length; i++) 
{ 
this.arr[i].setAttribute("extatt", i);//鉤子 
this.arr[i].onclick = function(e) 
{ 
var _e = window.event||e; 
var _target=_e.srcElement || _e.target; 
_self.setTable(parseInt(_target.getAttribute("extatt"))); 
} 
} 
}, 
setTable:function(index) 
{ 
this.lastIndex=this.index; 
this.index=index; 
//清除之前選項的樣式 
this.arr[this.lastIndex].className=""; 
//激活當前選項的樣式 
this.arr[this.index].className=this.active; 
//執行回調函數 
this.callBack(table[this.id]); 
} 
} 