Come evidenziare la pagina attiva in un menu della pagina principale?

Question

Ho un menu all'interno di un masterpage (in un sito Web ASP.NET) e desidero evidenziare la pagina attiva nel menu e nei sottomenu della pagina principale.

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; 
} 

grazie in anticipo.

Answer 1

finalmente ho risolto il mio problema con l'utilizzo jQuery:

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

Ci sono molti modi per farlo. Ci sono alcuni facili e alcuni tra quelli hacky brutte:

Soluzione 1: utilizzare un controllo Menu. Lo standard .NET Menu Control ha una soluzione semplice per farlo. Questa è la soluzione più pulita e veloce a mio parere. Dai un'occhiata al post this. Mamma ti aiuterà se scegli questa soluzione.

Soluzione 2: È coud utilizzare una sorta di javascript per evidenziare la voce corrente. jQuery renderebbe tutto più facile se non vuoi scrivere tutto da solo. Per questa soluzione dai un'occhiata alla pagina this. È obsoleto ma comunque efficace.

Soluzione 3: Questo è un pò brutta soluzione e si può farlo in molti modi diversi: è possibile modificare il <a> elementi ai controlli HyperLink e impostare una sorta di sessione o cookie quando si fa clic su di essi. Quando impostato, è possibile modificare lo stile in base al valore del cookie.

Ci sono ancora più modi per risolvere questo problema, ma penso che le prime due soluzioni ti aiuteranno.

Answer 3

controllare l'url e ottenere il nome del file html, quindi confrontarlo e impostare la classe css nella pagina master oppure creare un menu UserControl separato e quindi inserirlo nella pagina principale.

devi cambiare il tuo tag di ancoraggio per i collegamenti ipertestuali

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; 
     } 
    } 

Se le pagine web sono in directory principale allora non passare per pageDirectory. e se stai usando querystrings allora puoi cambiare per category. Spero che questo ti sia d'aiuto.

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'); 
});