0

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

4

3 回答 3

1

我会用 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;
}
于 2012-11-09T13:50:09.903 回答
1

你的问题很简单，你的元素没有任何“id”值，你有class像class="main-nav-sectionBooks". 如果您id向元素添加属性，您将成功。此致，

于 2012-11-09T13:24:57.837 回答
0

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

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

至

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

那是因为使用您的 Javascript 代码，您试图通过 id 获取页面的元素getElementById()。

于 2012-11-09T13:11:54.430 回答