下拉菜单

最新推荐文章于 2025-08-19 08:41:01 发布

jttccw

最新推荐文章于 2025-08-19 08:41:01 发布

阅读量314

点赞数

CC 4.0 BY-SA版权

文章标签： javascript div function table border microsoft

本文链接：https://blog.youkuaiyun.com/jttccw/article/details/2157287

本文介绍了一个使用C#编写的网页应用程序中的菜单交互实现。通过JavaScript定义了多个DIV元素作为下拉菜单，并为每个菜单项设置了mouseover和mouseout事件，当鼠标悬停在特定的表格单元格上时，显示相应的下拉菜单；当鼠标移开时，隐藏这些菜单。文章展示了如何通过简单的脚本控制DIV的可见性，从而实现菜单项的动态展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ Page language="c#" Codebehind="EDS010102.aspx.cs" AutoEventWireup="false" Inherits="xiala.EDS010102" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
  <title>WebForm1</title>
<meta content="Microsoft Visual Studio .NET 7.1" name=GENERATOR>
<meta content=C# name=CODE_LANGUAGE>
<meta content=JavaScript name=vs_defaultClientScript>
<meta content=http://schemas.microsoft.com/intellisense/ie5 name=vs_targetSchema>
<script language=javascript id=clientEventHandlersJS>

  function td1_onmouseover(){

  div1.style.visibility="visible"

  }

  function td1_onmouseout(){

  div1.style.visibility="hidden"

  }

  function div1_onmouseover(){

  div1.style.visibility="visible"

  }

  function div1_onmouseout){

  div1.style.visibility="hidden"

  }

  function td2_onmouseover(){

  div2.style.visibility="visible"

  }

  function td2_onmouseout(){

  div1.style.visibility="hidden"

  }


  function div2_onmouseover(){

  div2.style.visibility="visible"

  }

  function div2_onmouseout(){

  div2.style.visibility="hidden"

  }


  function td3_onmouseover(){

  div3.style.visibility="visible"

  }

  function td3_onmouseout(){

  div3.style.visibility="hidden"
  }

  function div3_onmouseover(){

  div3.style.visibility="visible"
  }

  function div3_onmouseout(){

  div3.style.visibility="hidden"

  function td4_onmouseover(){

  div3.style.visibility="visible"

  }

  function td4_onmouseout(){

  div3.style.visibility="hidden"
  }

  function div4_onmouseover(){

  div3.style.visibility="visible"
  }

  function div4_onmouseout(){

  div3.style.visibility="hidden"

  }

  </script>
</HEAD>
<BODY language=javascript vLink=black aLink=black link=black>
<FORM id=Form1 method=post runat="server">
<TABLE id=Table1 style="WIDTH: 779px; HEIGHT: 706px" cellSpacing=1 cellPadding=1
width=779>
<TR>
    <TD style="WIDTH: 780px; POSITION: relative; HEIGHT: 767px"
     MS_POSITIONING="GridLayout">
      <TABLE
      style="Z-INDEX: 102; LEFT: 0px; WIDTH: 776px; POSITION: absolute; TOP: 136px; HEIGHT: 27px"
      borderColor=#ffccf0 cellSpacing=1 cellPadding=1 width=776 align=center
      bgColor=#66ff66 border=1>
        <TR>
          <TD language=javascript id=td1 onmouseover="return td1_onmouseover()"
          onmouseout="return td1_onmouseout()" align=center
            ><FONT face=憊懱
          >幮堳娗棟</FONT></TD>
          <TD language=javascript id=td2 onmouseover="return td2_onmouseover()"
          onmouseout="return td2_onmouseout()" align=center
            ><FONT face=憊懱
          >僇儗儞僟乕</FONT></TD>
          <TD language=javascript id=td3 onmouseover="return td3_onmouseover()"
          onmouseout="return td3_onmouseout()" align=center
            ><FONT face=憊懱
          >嬑懹忣曬</FONT></TD>
          <TD language=javascript id=td4 onmouseover="return td4_onmouseover()"
          onmouseout="return td4_onmouseout()" align=center
            ><FONT face=憊懱
          >斈梡儅僗僞乕</FONT></TD></TR></TABLE>
      <DIV language=javascript id=div1 onmouseover="return div1_onmouseover()"
      style="Z-INDEX: 106; LEFT: 48px; VISIBILITY: hidden; WIDTH: 72px; POSITION: absolute; TOP: 160px; HEIGHT: 75px; BACKGROUND-COLOR: #ccccff"
      onmouseout="return td1_onmouseout()"
      ms_positioning="GridLayout">
      <TABLE id=Table2
      style="Z-INDEX: 101; LEFT: 0px; WIDTH: 72px; POSITION: absolute; TOP: 0px; HEIGHT: 75px"
      cellSpacing=0 cellPadding=0 width=72 align=center bgColor=#ccccff border=0
      >
        <TR>
          <TD onmouseover="this.style. backgroundColor='#6666ff'"
          style="HEIGHT: 24px"
          onmouseout="this.style. backgroundColor='#ccccff'" align=center
          rowSpan=1><FONT face=憊懱 size=2
            ><A href="#" >嵟怴</A></FONT></TD></TR>
        <TR>
          <TD onmouseover="this.style. backgroundColor='#6666ff'"
          style="HEIGHT: 25px" align=center><FONT size=2
            ><A href="#" >嵟怴</A></FONT></TD></TR>
        <TR>
          <TD onmouseover="this.style. backgroundColor='#6666ff'"
          style="HEIGHT: 25px" align=center><FONT size=2
            ><A href="#" >嵟怴</A></FONT></TD></TR></TABLE></DIV>
      <DIV language=javascript id=div2 onmouseover="return div2_onmouseover()"
      style="Z-INDEX: 107; LEFT: 264px; VISIBILITY: hidden; WIDTH: 72px; POSITION: absolute; TOP: 168px; HEIGHT: 158px; BACKGROUND-COLOR: #ccccff"
      onmouseout="return div2_onmouseout()"
      ms_positioning="GriLayout">
      <TABLE
      style="Z-INDEX: 101; LEFT: 0px; WIDTH: 72px; POSITION: absolute; TOP: 0px; HEIGHT: 158px"
      cellSpacing=1 cellPadding=1 width=72 bgColor=#ccccff border=0
      >
        <TR>
          <TD onmouseover="this.style. backgroundColor='#6666ff'"
          style="HEIGHT: 25px"
          onmouseout="this.style. backgroundColor='#ccccff'" align=center
          ><FONT face=憊懱 size=2><A href="#" >擔杮</A></FONT></TD></TR>
        <TR>
          <TD onmouseover="this.style. backgroundColor='#6666ff'"
          style="HEIGHT: 25px"
          onmouseout="this.style. backgroundColor='#ccccff'" align=center
          ><FONT face=憊懱 size=2><A href="#" >戝楢</A></FONT></TD></TR></TABLE></DIV>
      <DIV language=javascript id=div3 onmouseover="return div3_onmouseover()"
      style="Z-INDEX: 108; LEFT: 648px; VISIBILITY: hidden; WIDTH: 72px; POSITION: absolute; TOP: 176px; HEIGHT: 92px"
      onmouseout="return div3_onmouseout()"
      ms_positioning="GridLayout"><FONT face="MS UI Gothic"
      ></FONT>
      <TABLE id=Table3
      style="Z-INDEX: 108; LEFT: 464px; WIDTH: 72px; POSITION: absolute; TOP: 176px; HEIGHT: 92px"
      height=11 cellPadding=1 width=72 align=center bgColor=#ccccff border=0
      >
        <TR>
          <TD onmouseover="this.style. backgroundColor='#6666ff'"
          onmouseout="this.style. backgroundColor='#ccccff'" align=center
          ><FONT face=憊懱 size=2><A href="#" >怳懼</A></FONT></TD></TR>
        <TR>
          <TD onmouseover="this.style. backgroundColor='#6666ff'"
          onmouseout="this.style. backgroundColor='#ccccff'" align=center
          ><FONT face=憊懱 size=2><A href="#" >寚嬑</A></FONT></TD></TR>
        <TR>
          <TD onmouseover="this.style. backgroundColor='#6666ff'"
          onmouseout="this.style. backgroundColor='#ccccff'" align=center
          ><FONT face=憊懱 size=2><A href="#" >抶崗</A></FONT></TD></TR></TABLE></DIV>
      <DIV language=javascript id=div4 onmouseover="return div4_onmouseover()"
      style="Z-INDEX: 108; LEFT: 648px; VISIBILITY: hidden; WIDTH: 72px; POSITION: absolute; TOP: 176px; HEIGHT: 92px"
      onmouseout="return div4_onmouseout()"
      ms_positioning="GridLayout">
      <TABLE id=Table4
      style="Z-INDEX: 108; LEFT: 640px; WIDTH: 72px; POSITION: absolute; TOP: 168px; HEIGHT: 92px"
      cellPadding=1 width=72 align=center bgColor=#ccccff border=0
       HEIGHT=10;cellSpacing="1">
        <TR>
          <TD onmouseover="this.style. backgroundColor='#6666ff'"
          onmouseout="this.style. backgroundColor='#ccccff'" align=center
          ><FONT face=憊懱 size=2><A href="#" >嬑懹僷儔儊乕僞</A></FONT></TD></TR>
        <TR>
          <TD onmouseover="this.style. backgroundColor='#6666ff'"
          onmouseout="this.style. backgroundColor='#ccccff'" align=center
          ><FONT face=憊懱 size=2><A href="#" >惈暿</A></FONT></TD></TR>
        <TR>
          <TD onmouseover="this.style. backgroundColor='#6666ff'"
          onmouseout="this.style. backgroundColor='#ccccff'" align=center
          ><FONT face=憊懱 size=2><A href="#" >怑埵</A></FONT></TD></TR>
        <TR>
          <TD onmouseover="this.style. backgroundColor='#6666ff'"
          onmouseout="this.style. backgroundColor='#ccccff'" align=center
          ><FONT face=憊懱 size=2><A href="#" >廬嬈堳嬫暘</A></FONT>
        </TD></TR></TABLE></DIV></TD></TR></TABLE></FORM>
  </BODY>
</HTML>