The tenth chapter of the programming practice of the Web JavaScript in MU class

---restore content starts---

The tenth chapter of the programming exercise is the issue of tab switching.

The first analysis of the idea,

First, HTML page layout

We can use the UI Li tag to write the top line of content, with a div to install the following content, in order to achieve more results, we can put the above line of text in the <a> tag.

Second, CSS style production

Basic style settings for the document, font color border those

Third, JS implementation tab switch

By changing the DOM's CSS class name, the currently clicked tab is displayed, other hidden.

---restore content ends---

The tenth chapter of the programming exercise is the issue of tab switching.

The first analysis of the idea,

First, HTML page layout

We can use the UI Li tag to write the top line of content, with a div to install the following content, in order to achieve more results, we can put the above line of text in the <a> tag.

Second, CSS style production

Basic style settings for the document, font color border those

Third, JS implementation tab switch

1 when we click on the content of the following is transformed, then the content of the switch, I can initially set three Div, three parts of the text content, switch to who let who show

That is display:block; the rest is display:none; hide.

2 since it is an option that corresponds to this one, what is the connection between them? How we should relate the two when we write JS, because when we bind the event they are going to happen together.

Let's start knocking:

HTML CSS layout plus style is not much to say that the main is JS:

<ul>    <Liclass= "House"><ahref="#"onclick= "ChangeColor ()">Property</a></Li>    <Li><ahref="#"onclick= "ChangeColor ()">Home</a></Li>    <Li><ahref="#"onclick= "ChangeColor ()">Secondary</a></Li></ul><Divclass= "Div1">        <P>2.75 million purchase Changping Neighborhood Triathlon Total Price 200,000 buy a home</P>        <P>2 million within the five rings of the three 1.4 million home to the east third ring</P>        <P>Beijing 0 First pay property 530,000 buy East 5 ring 50 Ping</P>        <P>Beijing real estate straight down 5000 Citic House Park house Wang existing</P></Div><Divclass= "Div2">    <P>40 Flat rental house big makeover beauty girl's mixed up small nest</P>    <P>Classic Fresh Jean Home 90 flat old room glow Renaissance</P>    <P>New Chinese cool color warmth 66 flat contrast lively home</P>    <P>Tiles are like choosing a wife. Design of the flue in the bathroom</P></Div><Divclass= "Div3">    <P>Tongzhou Luxury 3 2,600,002 ring scarce 2 250w Dump</P>    <P>West 3-Ring permeability 2 29,001,300,002-bedroom Limited</P>    <P>Yellow Cheng Gen Primary School District only 2,600,121 Ping 700,000 throw!</P>    <P>Exclusive villa 2.8 million Suzhou Bridge 2 special price 2.48 million</P></Div>

Js:

<Scripttype= "Text/javascript">        //JS Implementation tab Toggle        functionChangeColor () {varAnode=document.getElementsByTagName ("a"); varLinode=document.getElementsByTagName ("Li"); varDivnode=document.getElementsByTagName ("Div")           //var Divn2ode=document.getelementbyid ("Div2");            //var Divn3ode=document.getelementbyid ("Div3");             for(varI=0; I<Linode.length;i++) {Linode[i].index=i; //because I didn't know the Index property at first, I couldn't keep up with the relationship between the Li tag and the div tag .Linode[i].onclick=function () {                  for(varN=0; n<Linode.length;n++) {Linode[n].classname=""; Divnode[n].classname="Hide"; }      //This place gives the for loop is very interesting and very good to ponder                     This. ClassName=" House";//Both ends of the code cannot be written before the internal for loop, because JS is parsed from top to bottom because the previous for loop is to attribute all the LI attributes to the original statedivnode[ This. Index].classname="Div1";//We are behind the addition of a new classname attribute to the original state, the Div property is also hidden at first, and then given}}. }

The tenth chapter of the programming practice of the Web JavaScript in MU class