Javascript 当我移动菜单时显示div_Javascript_Asp.net_Html

Javascript 当我移动菜单时显示div

javascript asp.net html

Javascript 当我移动菜单时显示div,javascript,asp.net,html,Javascript,Asp.net,Html,我有一个带有C#应用程序的ASP.Net。我想要一个菜单，当我在菜单上使用鼠标时，我想要显示一个div，其中有一些信息：标题和两列上的一些其他选项。我编写了一个Javascript方法，希望在其中使相应的div可见，但它找不到我的div部分（它总是空的）谁能告诉我有什么问题吗？下面是代码。我是ASP.Net，Javascript的乞丐。你知道做这件事的其他更好的方法吗？（如果你有，请举个例子）我的asp.net页面： <%@ Master Language="C#" AutoE

我有一个带有C#应用程序的ASP.Net。我想要一个菜单，当我在菜单上使用鼠标时，我想要显示一个div，其中有一些信息：标题和两列上的一些其他选项。我编写了一个Javascript方法，希望在其中使相应的div可见，但它找不到我的div部分（它总是空的）

谁能告诉我有什么问题吗？下面是代码。我是ASP.Net，Javascript的乞丐。你知道做这件事的其他更好的方法吗？（如果你有，请举个例子）

我的asp.net页面：

 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Sales_Site.SiteMaster" %>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
 <link href="~/Styles/Menu.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>


 </head>
 <body>
<form runat="server">
<div class="page">
    <div class="header">
        <div class="menu" >
        <ul id="main-nav">
            <li><a href="Books.aspx" onmouseover="Javascript:Show('Books')">Books</a>
                <div class="main-nav-sectionBooks"  style="width:400px;height:250px;border-color:Blue;display:none;visibility:hidden;">
                    <div class="main-nav-section-left" style="float:left;width:200px;height:100px">
                    Books Categories :
                    <ul><li>Subcateg1</li></ul>
                    <ul><li>Subcateg2</li></ul>
                    <ul><li>Subcateg3</li></ul>
                </div>
                <div class="main-nav-section-right" style="float:right;width:200px;height:100px"></div>
                Test 123 
                </div>
            </li>
            <li><a href="Music.aspx" onmouseover="Javascript:Show('Music')">Music</a>
                <div class="main-nav-sectionMusic" runat="server" style="width:400px;height:250px;border-color:Blue;display:none;visibility:hidden;">
                    <div class="main-nav-section-left" style="float:left;width:200px;height:100px">
                    Music Categories :
                    <ul><li>Subcateg Music 1</li></ul>
                    <ul><li>Subcateg Music 2</li></ul>
                    <ul><li>Subcateg Music 3</li></ul>
                </div>
                <div class="main-nav-section-right" style="float:right;width:200px;height:100px"></div>
                Test 123 
                </div>
             </li>
            <li><a href="Clothing.aspx" onmouseover="Javascript:Show('Clothing')">Clothing</a>
             <div class="main-nav-sectionClothing" runat="server" style="width:400px;height:250px;border-color:Blue;display:none;visibility:hidden;">
                    <div class="main-nav-section-left" style="float:left;width:200px;height:100px">
                    Clothing Categories :
                    <ul><li>Subcateg Clothing 1</li></ul>
                    <ul><li>Subcateg Clothing 2</li></ul>
                    <ul><li>Subcateg Clothing 3</li></ul>
                </div>
                <div class="main-nav-section-right" style="float:right;width:200px;height:100px"></div>
                Test 123 
                </div>
                </li>
        </ul>
        </div>


    </div>
    <div class="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
    </div>
    <div class="clear">
    </div>
    <div class="footer">

</div>

</div>
    <script type="text/javascript" language="javascript">
        function Show(type) {
            HideControl("main-nav-sectionBooks");
            HideControl("main-nav-sectionMusic");
            HideControl("main-nav-sectionClothing");

            var ControlName = "main-nav-section" + type;
            alert(ControlName);
            var control = document.getElementById(ControlName);

            if (control) {

                control.style.display = 'block';
                control.style.visibility = 'visible';

            }
            else
                alert("null");

        }

        function HideControl(controlName) {
            var control = document.getElementById(controlName);

            if (control) {
                control.style.display = 'none';
                control.style.visibility = 'hidden';
            }
        }

</script>
</form>


书籍类别：
子类别1
子类别2
子类别3
测试123


音乐类别：
子类别音乐1

子类别音乐2

子类别音乐3

测试123


服装类别：
子类别服装1

子类别服装2

子类别服装3

测试123


功能显示（类型）{
HideControl（“主导航部分手册”）；
HideControl（“主导航部分音乐”）；
HideControl（“主导航部分”）；
var ControlName=“主导航区段”+类型；
警报（控制名称）；
var control=document.getElementById（ControlName）；
如果（控制）{
control.style.display='block'；
control.style.visibility='visible'；
}
其他的
警报（“空”）；
}
函数HideControl（controlName）{
var control=document.getElementById（controlName）；
如果（控制）{
control.style.display='none'；
control.style.visibility='hidden'；
}
}



您应该给出要显示ID的div，而不是您现在所做的类的ID
<div class="main-nav-sectionClothing" runat="server" style...

您的问题非常简单，您的元素没有任何“id”值，您有class
属性，如class=“main nav sectionBooks”
。如果将id属性添加到元素中，您将成功。
致以最诚挚的问候，
我只想用CSS实现这一点：
示例

HTML:
<div id="main-nav-sectionClothing" runat="server" style...

<div class="page">
    <div class="header">
        <div class="menu" >
        <ul id="main-nav">            
          <li>Books
            <div class="main-nav-sectionBooks"  style="width:400px;height:250px;border:1px solid Blue;">
                  SOMETHING
          </li>           
        </ul>
      </div>
  </div>
 </div>

.main-nav-sectionBooks{
  display:none;
}

#main-nav li:hover div.main-nav-sectionBooks{
  display:block;
}