0

私はC＃アプリケーションを備えたASP.Netを持っています。メニューが欲しいのですが、メニューにマウスを置いているときに、いくつかの情報があるdivを表示したいと思います：タイトルと2つの列のその他のオプション。対応するdivを表示したい場所からJavascriptメソッドを作成しましたが、divセクションが見つかりません（常にnullです）。

誰かが何が問題なのか教えてもらえますか？以下はコードです。私は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

問題は非常に単純です。要素に「id」値がなく、のclassような属性がありますclass="main-nav-sectionBooks"。要素に属性を追加idすると、成功します。よろしくお願いします、

于 2012-11-09T13:24:57.837 に答える
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 に答える
0

表示したいdivに、現在行ったクラスのIDがないことを指定する必要があります。

<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 に答える