Jak podświetlić aktywną stronę w menu strony wzorcowej?

Question

Mam menu wewnątrz masterpage (w witrynie sieci Web ASP.NET) i chcę podświetlić aktywną stronę w menu i podmianach strony głównej.

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

z góry dzięki.

Answer 1

końcu rozwiązać mój problem z użyciem 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

Istnieje wiele sposobów, aby to zrobić. Istnieje kilka łatwych i brzydkich hakerów:

Rozwiązanie 1: Użyj kontrolki menu. Standardowy .NET Menu Control ma proste rozwiązanie. To jest najczystsze i najszybsze rozwiązanie w mojej opinii. Spójrz na post this. Maby to ci pomoże, jeśli wybierzesz to rozwiązanie.

Rozwiązanie 2: Możesz użyć jakiegoś javascript do podświetlenia bieżącego elementu. jQuery ułatwiłoby to, gdybyś sam nie pisał wszystkiego. Do tego rozwiązania zajrzyj na stronę this. Jest przestarzały, ale nadal skuteczny.

Rozwiązanie 3: To jest trochę brzydki rozwiązanie i można to zrobić na wiele różnych sposobów: Można zmienić <a> elementów do kontroli hiperłącze i ustawić jakieś ciasteczko sesji lub po kliknięciu na nich. Po ustawieniu można zmienić styl na podstawie wartości pliku cookie.

Jest jeszcze więcej sposobów na rozwiązanie tego problemu, ale myślę, że pierwsze dwa rozwiązania pomogą ci.

Answer 3

sprawdź swój adres URL i pobierz nazwę pliku html, a następnie porównaj go i ustaw swoją klasę css na stronie głównej lub utwórz menu UserControl oddzielne, a następnie umieść je na stronie wzorcowej.

Trzeba zmienić znacznik zakotwiczenia w hiperłącza

asp.net znaczników:

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

kodzie:

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

Jeśli Twoje strony internetowe są w katalogu głównym następnie nie przełączaj na pageDirectory. a jeśli korzystasz z querystringów, możesz przełączyć na category. Mam nadzieję, że to ci pomaga.

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