Home > Developer > JavaScript
Step 2: Define the selected StyleFor example, "active", Application tab block ID, such as "sidebar", default selected sequence number, such as the first "0 ";
Step 3: Call a function:
Copy codeThe Code is as follows: <SCRIPT type = "text/JavaScript">
// The parameters are as follows: The selected style of the Application Block ID is selected by default.
Table (0, "sidebar", "active ")
</SCRIPT>
Everything is OK. The tab responds to the Click Event and serves as IE and ff. The optimization will take some time. The effect is as follows:
The HTML source code is as follows: Copy code The 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>
<SCRIPT type = "text/JavaScript" src = "table. js"> </SCRIPT>
<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;
}
</Style>
</Head>
<Body>
<Div class = "sidebar" id = "sidebar">
<Ul>
<Li>
Option 1
</LI>
<Li>
Option 2
</LI>
<Li>
Option 3
</LI>
<Li>
Option 4
</LI>
<Li>
Option 5
</LI>
</Ul>
</Div>
</Body>
<SCRIPT type = "text/JavaScript">
// The parameters are as follows: The selected style of the Application Block ID is selected by default.
Table (0, "sidebar", "active ")
</SCRIPT>
</Html>
table. JS copy Code the code is as follows: /**
* @ author sky
*/
var table = function (index, ID, active)
{< br> table = new table (index, ID, active);
table. BIND ();
}< br> var table = function (index, ID, active)
{< br> This. index = parseint (INDEX);
This. arr = document. getelementbyid (ID ). getelementsbytagname ("Li");
This. active = active;
}< br> table. prototype = {
BIND: function ()
{< br> This. arr [this. index]. classname = This. active; // initialization
VaR _ Self = This;
for (VAR I = 0; I {< br> This. arr [I]. setattribute ("Ext", I);
This. arr [I]. onclick = function (e)
{< br> VaR _ e = Window. event | E;
VaR _ target = _ e. srcelement | _e.tar get;
_ self. setclass (parseint (_ target. getattribute ("Ext");
}< BR >},
setclass: function (INDEX)
{< br> This. arr [this. index]. classname = "";
This. arr [Index]. classname = This. active;
This. index = index;
}< BR >}
download demo
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
