Thoughts on the display mode of JavaScript + CSS labels

I visited the websites of many foreign book publishers on Sunday! I found that SAMs has a good practical idea for Label display! In general, JavaScript is used to dynamically change the display and hiding of Div. Let's take a look at the js code written by others:

1. <SCRIPT type = "text/JavaScript">
2. // <! [CDATA [
3. // The tag array. If it is written to me, I cannot think of it as saving it.
4. VaR tabarray = new array ();
5. // Which label is displayed by default
6. Function showdefaulttab (){
7. // Show 'description' tab by default, else show first
8. If (! Showtab ('item1 ')){
9. Displaytoggle (tabarray [0] + "_ container", true, 'iner iner on ');
10. Document. getelementbyid (tabarray [0]). classname = 'selected ';
11. }
12. }
13. // Change the hidden display of the content box and redraw the display style: It feels a bit like the Adaptive Mode
14. Function showtab (Tabid ){
15. VaR found = false;
16. For (VAR I = 0; I <tabarray. length; I ++ ){
17. If (tabarray [I]! = Tabid ){
18. Displaytoggle (tabarray [I] + "_ container", false, 'Container ');
19. Document. getelementbyid (tabarray [I]). classname = '';
20. } Else {
21. Displaytoggle (tabarray [I] + "_ container", true, 'iner iner on ');
22. Document. getelementbyid (tabarray [I]). classname = 'selected ';
23. Found = true;
24. }
25. }
26. Return found;
27. }
28. // The showtab function calls this function to hide the content box.
29. Function displaytoggle (ID, show, newclass ){
30. VaR OBJ = Document. getelementbyid (ID );
31. If (OBJ! = NULL ){
32. If (show ){
33. OBJ. style. Visibility = "visible ";
34. OBJ. style. Display = "Block ";
35. } Else {
36. OBJ. style. Visibility = "hidden ";
37. OBJ. style. Display = "NONE ";
38. }
40. If (newclass! = NULL)
41. OBJ. classname = newclass;
42. }
43. }
44. //]>
45. </SCRIPT>

Let's look at the HTML code! I believe everyone guessed the following:

1. <Div id = "sitepage">
2. <Div id = "productbss" class = "tabwidget">
3. <Ul class = "tabs">
4. <Li id = "Item1">
5. <A id = "info3" href = "# info3" onclick = "showtab ('item1'); Return false;"> description </a>
6. </LI>
7. <Script language = "JavaScript">
8. Tabarray. Push ('item1 ');
9. </SCRIPT>
10. <Li id = "item2">
11. <A id = "info8" href = "# info8" onclick = "showtab ('item2'); Return false;"> sample content </a>
12. </LI>
13. <Script language = "JavaScript">
14. Tabarray. Push ('item2 ');
15. </SCRIPT>
16. </Ul>
17. </Div>
18. <Div id = "bsscontent">
19. <Div id = "item1_container">
20. <! -- Detail content -->
21. </Div>
22. <Div id = "item2_container">
23. <! -- Detail content -->
24. </Div>
25. </Div>
26. <Script language = "JavaScript">
    Showdefaulttab ();
    </SCRIPT>
27. </Div>

Finally, the CSS style definition:

1. <Style type = "text/CSS">
2. <! --
3. Body {margin: 150px 0 0 0; font-size: 0.8em; font-family: "lucida Grande", Arial, Helvetica, sans-serif ;}
4. Div # sitepage {margin: 0 0 0 184px; padding: 0; width: 400px; Height: auto ;}
5. Div # productbss {clear: Both ;}
6. Div # bsscontent {margin:-1px 0 0 0; padding: 1em; border-Right: 1px solid # c7c8ca; border-left: 1px solid # c7c8ca; border-bottom: 1px solid # c7c8ca; border-top: 1px solid # c7c8ca ;}
7. /*-Tab widget (blog sidebar )-*/
8. Div. tabwidget {border-left: 1px solid # c7c8ca; position: relative ;}
9. /* Tab control */
10. Div. tabwidget ul. Tabs {list-style: none; margin: 0; padding: 0 0 1px 0; Height: 2em; border-bottom: 1px solid # c7c8ca ;}
11. Div. tabwidget ul. tabs Li {display: block; float: Left; Background-color: # Eee; Border: 1px solid # c7c8ca; border-width: 1px 1px 1px 0; padding: 0 1em; line-Height: 2em; margin: 0 ;}
12. Div. tabwidget ul. Tabs Li. Selected {background-color: # FFF; border-bottom: 1px solid # FFF ;}
13. /* Layer Control */
14. Div. tabwidget Div. Container {display: none; clear: Both; Border: 1px solid # c7c8ca; border-width: 0 1px 1px 0; position: relative ;}
15. Div. tabwidget Div. On {display: block ;}
16. /* Content control */
18. : Link,: visited {text-Decoration: none ;}
19. A: link {color: # 004f7f ;}
20. A: visited {color: #2e87b2 ;}
21. A: hover, A: active {color: # 004f7f; text-Decoration: underline ;}
22. -->
23. </Style>

The best thing to learn is: the application of JavaScript arrays in this process! Someone will say! Hard coding is not better! At least one function and two push operations are missing. This form is dead! But it is necessary to use people's thinking about writing code flexibly! If you only want to learn the superficial form of people, there's nothing to say!