管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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]);

　　}

　　}

教程首页 更多教程