메뉴 위로 이동할 때 div 표시

ASP.Net with C# application.I 메뉴가 필요하고 메뉴에서 마우스를 사용할 때 div가 몇 가지 정보를 표시하고 싶습니다. 제목 및 두 개의 열에있는 다른 옵션이 있습니다. 나는 해당 div를 볼 수 있도록 자바 스크립트 메소드를 작성했지만 div 섹션은 찾지 못했습니다 (항상 null입니다).메뉴 위로 이동할 때 div 표시

누군가가 내게 어떤 문제가 있다고 말할 수 있습니까? 다음은 코드입니다. 내가 ASP.Net에 초심자입니다 당신은 다른 방법을 알고 Javascript.Do, 더 나은,

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

출처

2012-11-09 user1577242

최고 감사합니다 :

예 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-09 13:50:09 Hardrada

ID를 표시하려는 div에게 지금 한 클래스의 이름을 표시해야합니다.

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

당신이 getElementById()와 id로 페이지의 요소를 가져하려고하는 자바 스크립트 코드 때문이다

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

합니다.

출처

2012-11-09 13:11:54 Martin

귀하의 문제는 매우 간단합니다. 귀하의 요소에 "id"값이 없으면 class 속성이 class="main-nav-sectionBooks"입니다. 요소에 id 속성을 추가하면 성공합니다. 난 그냥 CSS로 이런 짓을 했을까

출처

2012-11-09 13:24:57

메뉴 위로 이동할 때 div 표시

답변

관련 문제