Bir ana sayfa menüsünde etkin sayfa nasıl vurgulanır?

Question

masterpage (ASP.NET Web sitesinde) içinde bir menüm var ve ana sayfa menüsünde ve alt menülerde etkin sayfayı vurgulamak istiyorum.

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: önceden

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

teşekkürler.

Answer 1

nihayet i jQuery kullanarak ilgili sorunu da hallettim:

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

Bunu yapmanın birçok yolu vardır. Bazı kolay ve bazı çirkin hacky olanlar:

Çözüm 1: Bir Menü Kontrolü kullanın. Standart .NET Menu Control'ün bunu yapmak için kolay bir çözümü vardır. Bu benim görüşüme göre en temiz ve hızlı çözüm. this gönderin. Bu çözümü seçerseniz Maby size yardımcı olacaktır.

Çözüm 2: Geçerli öğeyi vurgulamak için bir çeşit javascript kullanın. jQuery, her şeyi kendiniz yazmak istemezseniz bunu daha da kolaylaştıracaktır. Bu çözüm için this sayfasına bakabilirsiniz. Modası geçmiş ama yine de etkili.

Çözüm 3: Bu tür çirkin çözümdür ve çok farklı şekillerde yapabilirsiniz: onlara tıkladıklarında oturumda veya çerez çeşit HyperLink kontrollerine <a> unsurları değiştirmek ve ayarlayabilirsiniz. Ayarlandığında, stili, çerezin sahip olduğu değere göre değiştirebilirsiniz.

Bunu çözmenin daha başka yolları var ama ilk iki çözümün size yardımcı olacağını düşünüyorum.

Answer 3

url'nizi kontrol edin ve html dosya adını alın, ardından karşılaştırın ve css sınıfınızı ana sayfada ayarlayın veya UserControl'ı ayırın ve daha sonra ana sayfaya yerleştirin.

Sen Köprüler

için çapa etiketi değiştirmek zorunda

asp.net işaretleme:

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

Web sayfalarınızı sonra kök dizininde ise pageDirectory için geçiş yapmayın. ve eğer querystrings kullanıyorsanız category için geçiş yapabilirsiniz. Umarım bu size yardımcı olur.

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