Home > Developer > JavaScript
Return to original. After the style switch, return the control to the page, that is, table. js only controls the switching style and record operations:
Copy codeThe Code is as follows:
<! 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">
Option 1
</Li>
<Li point = "table2">
Option 2
</Li>
<Li point = "table3">
Option 3
</Li>
<Li point = "table4">
Option 4
</Li>
<Li point = "table5">
Option 5
</Li>
</Ul>
</Div>
<Div id = "table1" class = "content">
This is the content of the first tab.
</Div>
<Div id = "table2" class = "content">
This is the content of the second tab.
</Div>
<Div id = "table3" class = "content">
This is the content of the third tab.
</Div>
<Div id = "table4" class = "content">
This is the content of the fourth tab.
</Div>
<Div id = "table5" class = "content">
This is the content of the fifth tab.
</Div>
</Body>
<Script type = "text/javascript" src = "table. js"> </script>
<Script type = "text/javascript">
// Available callback function 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 ";
}
// The parameters are as follows: The selected style callback function of the Option block ID is selected by default (starts from 0)
Table ("sidebar", "active", back, 0 );
</Script>
</Html>
Copy codeThe Code is as follows:
// Available callback function 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 ";
}
// The parameters are as follows: The selected style callback function of the Option block ID is selected by default (starts from 0)
Table ("sidebar", "active", back, 0 );
The table. js code is as follows:
Copy codeThe Code is 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 the option style
This. setTable (this. index );
// Bind 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.tar get;
_ Self. setTable (parseInt (_ target. getAttribute ("extatt ")));
}
}
},
SetTable: function (index)
{
This. lastIndex = this. index;
This. index = index;
// Clear the selected Style
This. arr [this. lastIndex]. className = "";
// Activate the style of the current option
This. arr [this. index]. className = this. active;
// Execute the callback function
This. callBack (table [this. id]);
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
