When learning javascript, I made a javascript Application: Scaling navigation.
Key knowledge points: Get the elements of the trigger event handle, such as <div id = 'div1 ', World </div>. When an onclick event is triggered, obtain the elements of the event, the 'target' attribute is used, such as event.tar get. In ie, you must use the 'srcelement 'attribute to obtain the elements that trigger this event.
Js Code:
1. // <! [CDATA [
2. var slider = false;
3. var num;
4. window. onload = function (){
5. document. getElementById ('elements1'). style. display = 'none ';
6. document. getElementById ('elements2'). style. display = 'none ';
7. for (var I = 1; I <= 2; I ++ ){
8. document. getElementById ('label' + I). onclick = showHideSlide;
9 .}
10 .}
11.
12. // response to the click Event handle
13.
14. function showHideSlide (evnt ){
15. var theEvent = evnt? Evnt: window. event;
16. var theSrc = theEvent.tar get? TheEvent.tar get: theEvent. srcElement;
17. var item = 'elements' + theSrc. id. substr (5, 1 );
18. var toggleNav = document. getElementById (item );
19. if (slider = false ){
20. toggleNav. style. display = 'block ';
21. slider = true;
22.} else {
23. toggleNav. style. display = 'none ';
24. slider = false;
25 .}
26 .}
27.
28.
29. //]>
Html:
1. <div id = "label1" class = "label">
2. Name
3. </div>
4. <div class = "elements" id = "elements1">
5. <label> First Name: </label> <br/> <input type = "text" name = "firstname"/> <br/>
6. <label> Last Name: </label> <br/> <input type = "text" name = "lastname"/> <br/>
7. </div>
8. <div id = "label2" class = "label">
9. Address
10. </div>
11. <div class = "elements" id = "elements2">
12. <label> Address </label> <br/> <input type = "text" name = "address"> <br/>
13. </div>
From desert snail 80