Question

我有一个带有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>

Answer 1

您的问题非常简单，您的元素没有任何“id”值，您有class属性，如class="main-nav-sectionBooks"。如果您为元素添加id属性，您将获得成功。最诚挚的问候，

Answer 2

我会用CSS做到这一点：

示例 http://jsbin.com/oreqew/1/edit

HTML：

<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>

CSS：

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

Answer 3

你应该给你想要显示ID的div而不是你现在所做的课程。

<div class="main-nav-sectionClothing" runat="server" style...

到

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

这是因为您使用Javascript代码尝试按getElementById() ID获取页面元素。

当我移动菜单时显示div

3 个答案: