js-"Multiple calls with Page" tab TAB encapsulation

These two days encountered a page, the same page of the same effect will be used many times, such as tab, such as Carousel. I do not want to be very irresponsible copy the code, so the page bloated, my heart is also blocked panic. So I tried to encapsulate the code and call it multiple times.

For the package, only in the public class to see a teacher operation, oneself also do not know.

At least at last in the group under the guidance of the Great God, one step at a pace by Jane caused by the difficult to perfect. On the last version, the middle of the iteration version, it is only convenient for later encapsulation other words reference.

The final summary is, a bite to eat not a fat, I have been thinking of the previous two days is packaged up, from the most difficult code began to tinker, and the half-day to all around the dizzy. Program this matter, you thought than the computer clear, first should think more than the computer is simple, and then the winding upgrade. A game to play Big Boss, what equipment and skills have not been saved, you do not die who died.

Html:

<Divclass= "Atapwrap abouta_p"ID= "Atapwrap">            <ulID= "Atapheadwrap">                <Liclass= "Tapactiveli">About Us</Li>                <Li>Contact Information</Li>                <Li>Opinion Suggestion</Li>            </ul>            <Divclass= "Atapwraps"ID= "Atapwraps">                <Div>                    <P>Text 1</P>                </Div>                <Divclass= "Hide">                    <P>Text 2</P>                </Div>                <Divclass= "Hide">                    <P>Text 3</P>                </Div>            </Div>        </Div>        <Divclass= "Atapwrap abouta_p"ID= "ATAPWRAP2">                <ulID= "ATAPHEADWRAP2">                    <binclass= "Tapactiveli">About Us</Li><Li>Contact Information</Li><Li>Opinion Suggestion</Li>                </ul>                <Divclass= "Atapwraps"ID= "ATapWrapS2">                    <Div>                        <P>Text 1</P>                    </Div>                    <Divclass= "Hide">                        <P>Text 2</P>                    </Div>                    <Divclass= "Hide">                        <P>Text 3</P>                    </Div>                </Div>        </Div>

Js:

<script type= "Text/javascript" >window.onload=function(){                functionFor (c,d) { for(vari = 0; i < c.length; i++) {C[i].index=i; C[i].onclick=function(e) { for(varj = 0; J < C.length; J + +) {C[j].classname= ""; D[j].classname= "Hide"; }                             This. ClassName = "Tapactiveli"; d[ This. Index].classname = ""; }                        }                    }                functiontab (A, b) {varALi = document.getElementById (a). getElementsByTagName (' Li '); varAdiv = document.getElementById (b). getElementsByTagName (' div ');                For (Ali,adiv)}; tab (' Atapheadwrap ', ' atapwraps '); tab (' ATapHeadWrap2 ', ' aTapWrapS2 '); }        </script>

Css:

<style type= "Text/css" >. Hide{Display:None; }Li{List-style:None;Display:Inline-block;Background-color:#90EE90; }. Tapactiveli{Background-color:#FF7F50; }Div{Border:1px solid #f00; }. Atapwrap{Border:None; }</style>

PS: This does not stop bubbling, say to stop it? I don't know. The great God said look bored, let me put bubble delete, I add a version of it.

Js:

Window.onload =function() {                functionfor (c, D) {functionStoppropagation (e) {e= e | |window.event; if(e.stoppropagation) {//A way to block Bubblese.stoppropagation (); } Else{e.cancelbubble=true;//ie block bubbling method                        }                    };  for(vari = 0; i < c.length; i++) {C[i].index=i; C[i].onclick=function(e) {stoppropagation (e) for(varj = 0; J < C.length; J + +) {C[j].classname= ""; D[j].classname= "Hide"; }                             This. ClassName = "Tapactiveli"; d[ This. Index].classname = ""; }                    }                }                functiontab (A, b) {varALi = document.getElementById (a). getElementsByTagName (' Li '); varAdiv = document.getElementById (b). getElementsByTagName (' div ');                For (ALi, Adiv)}; tab (' Atapheadwrap ', ' atapwraps '); tab (' ATapHeadWrap2 ', ' aTapWrapS2 '); }

js-"Multiple calls with Page" tab TAB encapsulation