Home > Developer > Web Develop
Intermediate transition: Changing process-oriented procedures into object-oriented forms
<style>
#div1 Input {background: #CCC;}
#div1. active {background:yellow;}
#div1 Div {width:200px; height:200px; background: #CCC; display:none;}
</style>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<script>
Window.onload=function ()
{
var Odiv=document.getelementbyid (' Div1 ');
var abtn=odiv.getelementsbytagname (' input ');
var adiv=odiv.getelementsbytagname (' div ');
var i=0;
for (i=0;i<abtn.length;i++)
{
Abtn[i].index=i;
Abtn[i].onclick=function ()
{
for (i=0;i<abtn.length;i++)
{
Abtn[i].classname= ";
Adiv[i].style.display= ' None ';
}
This.classname= ' active ';
adiv[this.index].style.display= ' block ';
};
}
};
</script>
<body>
<div id= "Div1" >
<input class= "Active" type= "button" value= "Education"/>
<input type= "button" value= "Finance"/>
<input type= "button" value= "AAA"/>
<div style= "Display:block;" >1asdfasdfds</div>
<div>2xzcvxzcv</div>
<div>5332342345</div>
</div>
</body>
Rewriting considerations:
1. Premise: All code must be included in Window.onload
2. Remove function nesting (window.onload nested functions inside the window.onload to go outside)
3. Cannot have function nesting, but can have global variables (such as the OnClick function is carried out, ABTN is a private variable in the Window.onload function, the onclick function can not be used)
Process:
1.onload→ constructor function
2. Global variables → Properties
3. Function → method
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
