请教一个问题,鼠标放到大类上,在大类下方显示小类
我想完成一个这样的功能,当鼠标放在大类上的时候,大类下方小时小类如何完成这个效果呢...
<style> #1_1 {padding:5px 0 5px 0; width:800px; height:39px; border:1px solid #808080; overflow:hidden;} #1_1 a {float:left; display:block; margin-left:5px; width:100px; line-height:25px; border:1px solid #808080; text-align:center; text-decoration:none;} #1_1 a:hover {color:red;} #2_1,#2_2,#2_3,#2_4,#2_5,#2_6,#2_7 {padding:5px 0 5px 0; width:800px; line-height:39px; border-left:1px solid #808080; border-bottom:1px solid #808080; border-right:1px solid #808080; text-align:center; overflow:hidden;} </style> <script type="text/javascript"> function g(o) {return document.getElementById(o);} function Li(n) {for(var i=1;i<8;i++){if(n==i){g("2_"+i).style.display="block";}else{g("2_"+i).style.display="none";}}} </script> <div id="1_1"> <a href="#" onmouseover="Li(1);">大类①</a> <a href="#" onmouseover="Li(2);">大类②</a> <a href="#" onmouseover="Li(3);">大类③</a> <a href="#" onmouseover="Li(4);">大类④</a> <a href="#" onmouseover="Li(5);">大类⑤</a> <a href="#" onmouseover="Li(6);">大类⑥</a> <a href="#" onmouseover="Li(7);">大类⑦</a> </div> <div id="2_1" style="display:none;">①小类① | ①小类② | ①小类③ | ①小类④ | ①小类⑤ | ①小类⑥ | ①小类⑦</div> <div id="2_2" style="display:none;">②小类① | ②小类② | ②小类③ | ②小类④ | ②小类⑤ | ②小类⑥ | ②小类⑦</div> <div id="2_3" style="display:none;">③小类① | ③小类② | ③小类③ | ③小类④ | ③小类⑤ | ③小类⑥ | ③小类⑦</div> <div id="2_4" style="display:none;">④小类① | ④小类② | ④小类③ | ④小类④ | ④小类⑤ | ④小类⑥ | ④小类⑦</div> <div id="2_5" style="display:none;">⑤小类① | ⑤小类② | ⑤小类③ | ⑤小类④ | ⑤小类⑤ | ⑤小类⑥ | ⑤小类⑦</div> <div id="2_6" style="display:none;">⑥小类① | ⑥小类② | ⑥小类③ | ⑥小类④ | ⑥小类⑤ | ⑥小类⑥ | ⑥小类⑦</div> <div id="2_7" style="display:none;">⑦小类① | ⑦小类② | ⑦小类③ | ⑦小类④ | ⑦小类⑤ | ⑦小类⑥ | ⑦小类⑦</div>
<script type="text/javascript"> function g(o) {return document.getElementById(o);} function Li() {g("2_1").style.display="none"?"block":"none";} </script> <% dim sql,rs sql="select * from content where user='zhuzhu' and BigClassName='心情日志'" set rs=server.CreateObject("adodb.recordset") rs.open sql,conn,1,1 %> <td class="blog" align="middle"> <div id="1_1"><a href="#" onmouseover="Li();">心情日志</a></div> </td> <div id="2_1" style="display:none;"> <% if not rs.eof then do while not rs.eof %> <%=rs("SmallClassName")%>| <% rs.movenext loop end if%> </div>