设为首页收藏本站

新微赢技术网

 找回密码
 注册
搜索
热搜: 回贴
查看: 123|回复: 5
打印 上一主题 下一主题

请教一个问题,鼠标放到大类上,在大类下方显示小类

[复制链接]
跳转到指定楼层
1#
发表于 2010-1-10 03:54:31 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
我想完成一个这样的功能,当鼠标放在大类上的时候,大类下方小时小类

如何完成这个效果呢...
4#
发表于 2010-1-10 03:54:43 | 只看该作者
<script type="text/javascript">
function g(o) {return document.getElementById(o);}
function Li(n) {for(var i=1;i<2;i++){if(n==i){g("2_"+i).style.display="block";}else{g("2_"+i).style.display="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(1);">心情日志</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>



我按照你的方法改了一下不行呀
回复 支持 反对

使用道具 举报

3#
发表于 2010-1-10 03:54:39 | 只看该作者
程序代码:
<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>
回复 支持 反对

使用道具 举报

2#
发表于 2010-1-10 03:54:34 | 只看该作者
程序代码:
<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>
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

申请友链|小黑屋|最新主题|手机版|新微赢技术网 ( 苏ICP备08020429号 )  

GMT+8, 2024-11-18 18:23 , Processed in 0.176922 second(s), 10 queries , Gzip On, Memcache On.

Powered by xuexi

© 2001-2013 HaiAn.Com.Cn Inc. 寰耽

快速回复 返回顶部 返回列表