滑动菜单特效(一)

1. <meta content="text/html;charset=gb2312" http-equiv="Content-Type" /><style type="text/css"> 
2. <!– 
3. body,div,ul,li{ 
4. padding:0; 
5. text-align:center; 
6. } 
7. body{ 
8. font:12px "宋体"; 
9. text-align:center; 
10. } 
11. a:link{ 
12. color:#00F; 
13. text-decoration:none; 
14. } 
15. a:visited { 
16. color: #00F; 
17. text-decoration:none; 
18. } 
19. a:hover { 
20. color: #c00; 
21. text-decoration:underline; 
22. } 
23. ul{ list-style:none;} 
24. /*选项卡1*/ 
25. #Tab1{ 
26. width:460px; 
27. margin:0px; 
28. padding:0px; 
29. margin:0 auto;} 
30. /*选项卡2*/ 
31. #Tab2{ 
32. width:576px; 
33. margin:0px; 
34. padding:0px; 
35. margin:0 auto;} 
36. /*菜单class*/ 
37. .Menubox { 
38.     width:100%; 
39.     height:28px; 
40.     line-height:28px; 
41.     background-image: url(20079299441652.gif); 
42. } 
43. .Menubox ul{ 
44. margin:0px; 
45. padding:0px; 
46. } 
47. .Menubox li{ 
48. float:left; 
49. display:block; 
50. cursor:pointer; 
51. width:114px; 
52. text-align:center; 
53. color:#949694; 
54. font-weight:bold; 
55. } 
56. .Menubox li.hover{ 
57.     padding:0px; 
58.     width:116px; 
59.     border-left:1px solid #A8C29F; 
60.     border-top:1px solid #A8C29F; 
61.     border-right:1px solid #A8C29F; 
62.     background:url([img]/UploadFiles/200811/20081103uapqgq.gif[/img]); 
63.     color:#739242; 
64.     font-weight:bold; 
65.     height:27px; 
66.     line-height:27px; 
67.     background-image: url(200792994426548.gif); 
68. } 
69. .Contentbox{ 
70. clear:both; 
71. margin-top:0px; 
72. border:1px solid #A8C29F; 
73. border-top:none; 
74. height:181px; 
75. text-align:center; 
76. padding-top:8px; 
77. } 
78. —> </style><script> 
79. <!– 
80. /*第一种形式 第二种形式 更换显示样式*/ 
81. function setTab(name,cursel,n){ 
82. for(i=1;i<=n;i++){ 
83.   var menu=document.getElementById(name+i); 
84.   var con=document.getElementById("con_"+name+"_"+i); 
85.   menu.className=i==cursel?"hover":""; 
86.   con.style.display=i==cursel?"block":"none"; 
87. } 
88. } 
89. //–> 
90. </script><br />
91. <br />
92.  </p>
93. <div id="Tab1">
94. <div class="Menubox">
95. <ul>
96.     <li id="one1" onclick="setTab(‘one’,1,4)">新闻1</li>
97.     <li id="one2" onclick="setTab(‘one’,2,4)">新闻2</li>
98.     <li id="one3" onclick="setTab(‘one’,3,4)">新闻3</li>
99.     <li id="one4" onclick="setTab(‘one’,4,4)">新闻4</li>
100. </ul>
101. </div>
102. <div class="Contentbox">
103. <div id="con_one_1">新闻列表1</div>
104. <div id="con_one_2" style="display: none">新闻列表2</div>
105. <div id="con_one_3" style="display: none">新闻列表3</div>
106. <div id="con_one_4" style="display: none">新闻列表4</div>
107. </div>
108. </div>
109. <p><br />
110.  </p>
111. <div id="Tab2">
112. <div class="Menubox">
113. <ul>
114.     <li id="two1" onclick="setTab(‘two’,1,4)">新闻1</li>
115.     <li id="two2" onclick="setTab(‘two’,2,4)">新闻2</li>
116.     <li id="two3" onclick="setTab(‘two’,3,4)">新闻3</li>
117.     <li id="two4" onclick="setTab(‘two’,4,4)">新闻4</li>
118. </ul>
119. </div>
120. <div class="Contentbox">
121. <div id="con_two_1">新闻列表1</div>
122. <div id="con_two_2" style="display: none">新闻列表2</div>
123. <div id="con_two_3" style="display: none">新闻列表3</div>
124. <div id="con_two_4" style="display: none">新闻列表4</div>
125. </div>
126. </div>
127. <p>