마스터 페이지에서 활성 페이지를 강조 표시하는 방법은 무엇입니까?

Question

나는 ASP.NET 웹 사이트에있는 masterpage 안에 메뉴가 있는데, 나는 마스터 페이지 메뉴와 하위 메뉴에서 활성화 된 페이지를 강조하고 싶다.

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

감사합니다.

Answer 1

마지막으로 내가 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

이렇게하는 방법에는 여러 가지가 있습니다. 쉽고 재미있는 몇 가지 해키 코드가 있습니다.

해결책 1 : 메뉴 컨트롤을 사용하십시오. 표준 .NET 메뉴 컨트롤에는이를 수행하기위한 쉬운 솔루션이 있습니다. 이것은 제 의견으로는 가장 깨끗하고 빠른 해결책입니다. 게시물 this 봐. Maby는이 솔루션을 선택하면 도움을 줄 것입니다.

해결책 2 : 현재 항목을 강조 표시하기 위해 일종의 javascript를 사용했습니다. jQuery를 사용하면 모든 것을 직접 작성하지 않아도됩니다. 이 솔루션을 보려면 this 페이지를보십시오. 그것은 구식이지만 여전히 효과적입니다.

해결 방법 3 : 이 좀 추한 솔루션입니다 그리고 당신은 여러 가지 방법으로 그렇게 할 수 있습니다 : 당신이 그들을 클릭하면 당신은 세션이나 쿠키의 일종 하이퍼 링크 컨트롤에 <a> 요소를 변경하고 설정할 수 있습니다. 설정시 쿠키의 값에 따라 스타일을 변경할 수 있습니다.

더 많은 방법으로 문제를 해결할 수 있지만 처음 두 가지 해결책이 도움이 될 것입니다.

Answer 3

URL을 확인하고 html 파일 이름을 얻은 다음 마스터 페이지에서 CSS 클래스를 설정하거나 UserControl 메뉴를 별도로 만든 다음 마스터 페이지에 넣습니다.

당신은 하이퍼 링크

에 앵커 태그를 변경해야

asp.net 태그 :

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

웹 페이지가 다음 루트 디렉토리에있는 경우 pageDirectory으로 전환하지 마십시오. querystring을 사용하는 경우 category으로 전환 할 수 있습니다. 희망이 당신을 돕는 것입니다.

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