Return to the original, when the style switch, the control back to the page, that is, table.js only control switch style and record operation:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<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>
<body>
<div class= "sidebar" id= "sidebar" >
<ul>
<li point= "Table1" >
Option One
</li>
<li point= "Table2" >
Option two
</li>
<li point= "Table3" >
Option three
</li>
<li point= "Table4" >
Option Four
</li>
<li point= "Table5" >
Option Five
</li>
</ul>
</div>
<div id= "table1" class= "Content" >
This is the contents of the first tab
</div>
<div id= "table2" class= "Content" >
This is the contents of the Second tab
</div>
<div id= "Table3" class= "Content" >
This is the contents of the Third tab
</div>
<div id= "table4" class= "Content" >
This is the contents of the Fourth tab
</div>
<div id= "table5" class= "Content" >
This is the contents of the Fifth tab
</div>
</body>
<script type= "Text/javascript" src= "Table.js" > </script>
<script type= "Text/javascript" >
callback function Available parameters: Obj.lastindex (last option index) Obj.index (current option Index) Obj.arr (tab element Array)
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";
}
Parameters are: Option block ID selected style callback function default selection (0 start)
Table ("sidebar", "Active", back,0);
</script>
Copy Code code as follows:
callback function Available parameters: Obj.lastindex (last option index) Obj.index (current option Index) Obj.arr (tab element Array)
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";
}
Parameters are: Option block ID selected style callback function default selection (0 start)
Table ("sidebar", "Active", back,0);
The Table.js code is as follows:
Copy Code code as follows:
/**
* @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;//Current Index
this.lastindex=this.index;//Last Index
this.callback=callback| | function () {};
this.active=active| | " Active ";
This.id=id;
This.arr=document.getelementbyid (ID). getElementsByTagName ("Li");
}
table.prototype={
Bind:function ()
{
Initialize option style
This.settable (This.index);
Binding events
var _self=this;
for (var i = 0; i < this.arr.length; i++)
{
This.arr[i].setattribute ("Extatt", I);//Hook
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;
Clear styles for previous options
This.arr[this.lastindex].classname= "";
Activate the style of the current option
this.arr[this.index].classname=this.active;
Executing a callback function
This.callback (Table[this.id]);
}
}
