0
내가 불가능한 것을 요구하지만, 내 문제를 제시 할 수있다 (또한 페이지 탐색을위한 포스트 백을 cuasing 동안) 하이퍼 링크의 클릭에 패널을 볼 수 있도록 이미지 및 마우스 오버 이벤트를 디자인 목적으로 사용합니다. 메뉴 옵션 중 하나에서 상위 메뉴 항목 클릭시 하위 메뉴 옵션 집합을 표시해야합니다. 메뉴 항목 자체도 지정된 URL로 이동해야합니다.ASP.NET은
원래 AJAX 아코디언 패널을 사용하려고했지만 아코디언 패널이 하나 뿐이므로 항상 하위 메뉴 항목을 표시하고 접히지 않았습니다.
또한 div에 옵션을 넣고 javascript를 통해 디스플레이를 설정해 보았습니다. 이 기능은 작동했지만 페이지 탐색 다시 게시가 발생하면 덮어 씁니다. 여기
소스입니다 :<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Src="LeadHeader.ascx" TagName="LeadHeader" TagPrefix="uc1" %>
<%@ Register Src="~/LeadFooter.ascx" TagName="LeadFooter" TagPrefix="uc2" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var revert = new Array();
var inames = new Array('home', 'whoweare', 'whatwedo','ourapproach', 'ourvalues', 'contact');
// Preload
if (document.images) {
var flipped = new Array();
for(i=0; i< inames.length; i++) {
flipped[i] = new Image();
flipped[i].src = "images/"+inames[i]+"2.jpg";
}
}
function over(num) {
if(document.images) {
revert[num] = document.images[inames[num]].src;
document.images[inames[num]].src = flipped[num].src;
}
}
function out(num) {
if(document.images) document.images[inames[num]].src = revert[num];
}
function ShowHide(elementId)
{
var element = document.getElementById(elementId);
if(element.style.display != "block")
{
element.style.display = "block";
}
else
{
element.style.display = "none";
}
}
function UpdateText(element)
{
if(element.innerHTML.indexOf("Show") != -1)
{
element.innerHTML = "Hide Details";
}
else
{
element.innerHTML = "Show Details";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
<uc1:LeadHeader ID="LeadHeader" runat="server" />
</asp:ContentPlaceHolder>
<div id="nav">
<div class="menu-item">
<a href="Default.aspx">
<img src="Images/home.jpg" alt="home" id="home" onmouseover="over(0)" onmouseout="out(0)"
class="right" /></a>
</div>
<div class="menu-item">
<a href="AboutUs.aspx">
<img src="Images/whoweare.jpg" alt="who we are" id="whoweare" onmouseover="over(1)"
onmouseout="out(1)" class="right" /></a>
</div>
<%-- <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion ID="Accordion1" runat="server" AutoSize="None" FadeTransitions="true"
TransitionDuration="350" FramesPerSecond="40" RequireOpenedPane="false" >
<Panes>
<cc1:AccordionPane runat="server">
<Header>--%>
<div class="menu-item">
<a href="WhatWeDo.aspx">
<img src="Images/whatwedo.jpg" alt="what we do" id="whatwedo" onmouseover="over(2)"
onmouseout="out(2)" class="right" onclick="ShowHide('divDetails');UpdateText(this);" /></a></div>
<%--/Header>
<Content>--%>
<div id="divDetails" style="display:none;">
<a href="management.aspx" title="Management Development">Management Development</a><br />
<a href="leadership.aspx" title="Leadership Development">Leadership Development</a><br />
<a href="personal.aspx" title="Personal Development">Personal Development</a><br />
<a href="realteams.aspx" title="Team Building/Facilitation">Team Building & Facilitation</a><br />
<a href="coaching.aspx" title="Coaching">One to One Coaching</a>
</div>
<%-- </Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
--%>
<div class="menu-item">
<a href="OurApproach.aspx">
<img src="images/ourapproach.jpg" alt="our approach" id="ourapproach" onmouseover="over(3)"
onmouseout="out(3)" /></a>
</div>
<div class="menu-item">
<a href="OurValues.aspx">
<img src="images/ourvalues.jpg" alt="our values" id="ourvalues" onmouseover="over(4)"
onmouseout="out(4)" /></a>
</div>
<div class="menu-item">
<a href="ContactUs.aspx">
<img src="images/ContactUs.jpg" alt="contact us" id="contactus" onmouseover="over(5)"
onmouseout="out(5)" /></a>
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
<uc2:LeadFooter ID="LeadFooter" runat="server" />
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
너무 많은 코드, Helen! 관련 HTML과 자바 스크립트를 우리 바퀴에 파일의 내용을 덤핑하는 대신 표시하십시오 :) – roosteronacid