Wie aktiviere ich die Seite in einem Masterpage-Menü?

Question

Ich habe ein Menü innerhalb einer masterpage (in einer ASP.NET-Website), und ich möchte aktive Seite in Masterpage-Menü und Untermenüs hervorheben.

HTML:

<ul id="nav" class="sf-menu"> 
    <li class="current-menu-item"><a href="index.html">Home</a></li>  
    <li><a href="page.html">menu-2</a> 
     <ul> 
      <li><a href="page-full.html">full</a></li> 
      <li><a href="page-features.html">featurs</a></li> 
      <li><a href="page-typography.html">typography</a></li> 
     </ul> 
    </li> 
</ul> 

CSS:

#nav>li.current-menu-item>a, 
#nav>li.current_page_item>a{ 
    color: #fe8300; 
} 

Dank im Voraus.

Answer 1

endlich gelöst i mein Problem mit jQuery mit:

var str=location.href.toLowerCase(); 
    $("#nav li a").each(function() { 
     if (str.indexOf($(this).attr("href").toLowerCase()) > -1) { 
      $("li.current-menu-item").removeClass("current-menu-item"); 
      $(this).parent().addClass("current-menu-item"); 
     } 
    }); 
    $("li.current-menu-item").parents().each(function(){ 
     if ($(this).is("li")){ 
      $(this).addClass("current-menu-item"); 
     } 
    }); 

Answer 2

Es gibt viele Möglichkeiten, dies zu tun. Es gibt einige einfache und einige hässliche hacky:

Lösung 1: Verwenden Sie eine Menüsteuerung. Das standardmäßige .NET Menu Control bietet hierfür eine einfache Lösung. Dies ist meiner Meinung nach die sauberste und schnellste Lösung. Schauen Sie sich this Post an. Maby, es wird dir helfen, wenn du diese Lösung wählst.

Lösung 2: Sie könnten eine Art Javascript verwenden, um den aktuellen Artikel hervorzuheben. jQuery würde das einfacher machen, wenn Sie nicht alles selbst schreiben möchten. Für diese Lösung werfen Sie einen Blick auf this Seite. Es ist veraltet, aber immer noch effektiv.

Lösung 3: Dies ist ein bisschen hässlich Lösung und man kann auf viele verschiedene Arten tun: Sie könnten die <a> Elemente HyperLink Kontrollen ändern und eine Art von Sitzung oder Cookie gesetzt, wenn Sie darauf klicken. Wenn gesetzt, können Sie den Stil basierend auf dem Wert ändern, den der Cookie hat.

Es gibt noch mehr Wege, wie Sie das lösen könnten, aber ich denke, die ersten beiden Lösungen werden Ihnen helfen.

Answer 3

Überprüfen Sie Ihre URL und erhalten Sie den HTML-Dateinamen, dann vergleichen Sie es und legen Sie Ihre CSS-Klasse in der Masterseite oder ein Menü UserControl separat und dann auf Master-Seite.

Sie haben Ihren Anker-Tag zu Hyperlinks ändern

asp.net Markup:

<li><asp:HyperLink runat="server" ID="lnk_full" NavigateUrl="page-full.html" Text="full" /></li> 
<li><asp:HyperLink runat="server" ID="lnk_features" NavigateUrl="page-features.html" Text="features" /></li> 
<li><asp:HyperLink runat="server" ID="lnk_typography" NavigateUrl="page-typography.html" Text="typography" /></li> 

Codebehind:

protected void SelectMenu() 
    { 
     try 
     { 
      string page = Path.GetFileNameWithoutExtension(Request.AppRelativeCurrentExecutionFilePath); 
      string pageDirectory = Path.GetDirectoryName(Request.AppRelativeCurrentExecutionFilePath); 

      string category = Request.QueryString.Count>0 ? Request.QueryString[0] : string.Empty; 
      if (pageDirectory.Length > 3) 
      { 
       pageDirectory = pageDirectory.Substring(2, pageDirectory.Length - 2); 
      } 
      if (pageDirectory != null && pageDirectory.Length > 0 && page != null && page.Length > 0) 
      { 
       switch (pageDirectory) 
       { 
        case "Secure\\Clients": 
         switch (page) 
         { 
          case "page-full": 
           lnk_full.CssClass = "current-menu-item"; 
           break; 
          case "page-features": 
           lnk_features.CssClass = "current-menu-item"; 
           break; 
          case "page-typography": 
           lnk_typography.CssClass = "current-menu-item"; 
           break; 
         } 
         break; 
       } 
      } 
     } 
     catch (Exception ex) 
     { 
      throw ex; 
     } 
    } 

Wenn Sie Ihre Webseiten in Stammverzeichnis sind dann Schalten Sie nicht für pageDirectory. und wenn Sie Querystrings verwenden, können Sie für category wechseln. Ich hoffe, das hilft dir.

Answer 4

$(function() { 
     $(".navbar‐btn a").each(function() { 
      var hreff = this.href.trim().split("/").splice(3, 4); 

      if (hreff.length > 1) 
       hreff.splice(0, 1); 

      if (hreff[0] == window.location.pathname.split("/").splice(1, 1)[0]) 
       $(this).parent().addClass("active"); 
     }); 
    }) 

Answer 5

jQuery(document).ready(function() { 
    var str = location.href.toLowerCase(); 
    jQuery('#topnav li a[href=\'' + str + '\']').addClass('active'); 
});