javascript之通用简单的table选项卡实现(二)

回归原始，当样式切换后，把控制权还给页面，即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]); } }

　　推荐阅读

　　JSQL 一个 web DB 的封装

接上文说道的JSQL 4.当然随着HTML5的普及，web DB 已经是大势所趋了所以，JSQL封装到：复制代码代码如下: _CLIENTDATABASE_ = 'HotelManage'; _CLIENTDBVERSION_ = '0.1'; _CLIENTDBDESC_ = "First Client Data>>>详细阅读

本文标题：javascript之通用简单的table选项卡实现(二)

地址：http://www.17bianji.com/kaifa2/JS/26464.html

1/2 1