StaticSelectedStyle-CssClass funktioniert nicht

Question

Ich baue eine ASP.NET 4.0 Web-Anwendung, in der ich eine Menüsteuerung haben wie folgt:

#menu { 
     width: 940px; 
     height: 36px; 
     margin: 0 auto; 
     padding: 0; 
    } 

    #menu ul { 
     margin: 0px 0px 0px 10px; 
     padding: 0; 
     list-style: none; 
     line-height: normal; 
    } 

    #menu li { 
     float: left; 
    } 

    #menu a { 
     display: block; 
     height: 26px; 
     margin-right: 2px; 
     margin-bottom: 10px; 
     padding: 10px 20px 0px 20px; 
     text-decoration: none; 
     text-align: center; 
     text-transform: uppercase; 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 11px; 
     font-weight: bold; 
     color: #FFFFFF; 
     border: none; 
    } 

    #menu a:hover, .selectedMenuItem { 
     background: #FFFFFF; 
     text-decoration: none; 
     color: #333333; 
    } 


    <asp:Menu ID="menu" runat="server" StaticSelectedStyle-CssClass="selectedMenuItem"> 
    <Items> 
     <asp:MenuItem Text="Home" Selected="true" NavigateUrl="~/Home.aspx"></asp:MenuItem> 
     <asp:MenuItem Text="About Us" NavigateUrl="~/AboutUs.aspx"></asp:MenuItem> 
     <asp:MenuItem Text="Services" NavigateUrl="~/Services.aspx"></asp:MenuItem> 
     <asp:MenuItem Text="Contact" NavigateUrl="~/Contact.aspx"></asp:MenuItem> 
    </Items> 
    </asp:Menu> 

Ich möchte das ausgewählte Menüpunkt entsprechend der CSS-Klasse gestylt werden selectedMenuItem aber aus irgendeinem Grund passiert das nicht. Wie kann ich dieses Problem beheben?

Answer 1

Haben Sie Ihre Browser-Quelle überprüft, um sicherzustellen, dass ASP.NET Ihren Menüsteuerungs-ID-Wert nicht dynamisch umbenannte?

Answer 2

Ich habe das gleiche Problem und versuchte herauszufinden, was passiert ist. In dem Source-Code von thje html-Seite finde ich dies:

<div class="menu" id="NavigationMenu"> 
    <ul class="level1"> 
     <li><a class="level1" href="../Default.aspx">Start</a></li> 
     <!-- more li items with the same class --> 
    </ul> 

Ich erwartete meinen CssClass Namen, aber ebenen1 statt gefunden. Wenn ich mein CSS geändert habe:

hat es funktioniert. Wahrscheinlich nicht der richtige Weg, aber es ist eine Lösung des Problems. Wahrscheinlich nicht geeignet auf einem Produktionsserver, leider

Answer 3

1- definieren .selectedMenuItem Klasse wie nachfolgend unabhängig von ID (#menu)

.selectedMenuItem { 
     background: #FFFFFF; 
     text-decoration: none; 
     color: #333333; 
} 

2- Verwenden jQuerys addClass Verfahren, binden diese Methode auf das Klickereignis von Menüpunkten.

http://api.jquery.com/addClass/

Answer 4

Sie können dies von Code verwalten hinter auf dem Page_Load Ereignis der Master-Datei. Sie können beispielsweise die Methode Request.Path verwenden, um den Pfad der aktuellen Seite abzurufen, und dann einen Schalter oder eine if-Anweisung verwenden, um den Stil manuell dem entsprechenden MenuItem hinzuzufügen.

Answer 5

fügen Sie einfach diese CSS in Stylesheet, um aktive Registerkarte mit Hintergrundbild oder auch Hintergrund aktive Farbe hinzufügen keine Notwendigkeit in Menüsteuerung gemacht und fügen Sie alle statischen oder dynamischen Stil im Menü.

.menu a.static.selected 
{ 
background: url("../images/bg.jpg") repeat scroll 0 0; 
color: white;`` 
text-decoration: none; 
} 
.menu li a.dynamic.selected 
{ 

background: url("../images/bg.jpg") repeat scroll 0 0; 
color: white; 
text-decoration: none; 
}