0
ich das Unmögliche fragen können, aber lassen Sie mich mein Problem aufgeführt:ASP.NET macht ein Panel sichtbar auf Klick auf Hyperlink (während auch Postbacks für Seitennavigation cuasing)
Ich habe ein Menü in einem Masterpage, die verwendet Bilder und mouseover mouseout Ereignisse für Designzwecke. Auf einer der Menüoptionen muss ich eine Reihe von Untermenüs Optionen auf den Klick des übergeordneten Menüelements anzeigen. Der Menüeintrag selbst muss auch zu einer bestimmten URL navigieren.
Ich habe ursprünglich versucht, ein AJAX-Akkordeon-Panel zu verwenden, aber da ich nur ein Akkordeon-Panel hatte, zeigte es immer die Untermenüpunkte an und kollabierte nicht.
Ich habe auch versucht, die Optionen in ein Div setzen und die Anzeige über Javascript einstellen. Dies funktionierte aber wurde dann überschrieben, sobald der Seitennavigationspostback auftrat. Hier
ist die Quelle:
<%@ 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>
Zu viel Code, Helen! Zeigen Sie uns das relevante HTML und JavaScript anstatt nur den Inhalt einer Datei auf unseren Schößen zu entleeren :) – roosteronacid