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

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

迴歸原始，當樣式切換後，把控制權還給頁面，即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]);
}
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More