선택된 메뉴 하이라이트 면도기 3 cshtml js

Question

어제 나는 HTML5/CSS/JS/jQuery/PHP에서 면도기 3 또는 오히려 cshtml/css/js로 이동하기 시작했고 현재 활성 페이지를 강조 표시하려고합니다. 메뉴에서

_SiteLayout.cshtml 부분 :

<nav class="navigation"> 
     <ul class="active"> 
      <li class="unSelected"><a href="/Default" onclick="javascript:click (this);">Home</a></li> 
      <li class="unSelected"><a href="/Photography">Photography</a></li> 
      <li class="unSelected"><a href="/Webdevelopment">Web Development</a></li> 
      <li class="unSelected"><a href="/About">About</a></li> 
      <li class="unSelected"><a href="/Contact">Contact</a></li> 
    </ul> 
</nav> 

CSS는 부 :

.navigation .unSelected a { 
border-bottom: 2px solid #fff; 
} 

.navigation .selected a { 
border-bottom: 2px solid #3acdd5; 
} 

JS 부분 : 내가 선택한 신체 링크를 wan't

$('.navigation ul li a').click(function() { 
    $('.navigation ul li a').each(function(index, element) { 
     $(this).removeClass().addClass('unSelected'); 
    }) 

    $(this).removeClass('unSelected'); 
    $(this).addClass('selected'); 
}); 

당신 때까지 강조하는 당신이 거기에있을 때 highligted되어야하는 다음 하나를 클릭하십시오. html을 사용할 때했을 것입니다. 각 개별 페이지에 설정하십시오.

본 것처럼이 작동하지 않을 것입니다 그리고 경우에만 JS와 함께 작업 하여이 작업을 할 수있는 방법이 있는지 궁금합니다.

그렇지 않은 경우 이런 종류의 문제를 해결하는 가장 좋은 방법은 무엇입니까?

이

<li class='@(Request.Url.AbsolutePath.ToString() == Url.Action("Default") ? "selected" : "unSelected")><!-- List item content --></li> 

이것은 당신이 어떤 중요한 URL 구문 분석을 수행 할 필요가 없습니다 있도록 당신이 MVC의 URL 라우팅을 활용할 수 있습니다 :

Answer 1

나의 추천 그래서 같은 selected 및 unselected 클래스를 추가하는 면도기 엔진을 사용하다 또는 어디에서나 하드 코딩하십시오. 그러나 URL의 일부로 쿼리 문자열이있는 경우 내 대답이 모두 포함되지 않을 수 있습니다.

업데이트 : 방금 ​​내 프로젝트에서 테스트를 수행했으며 Request.Url.AbsolutePath에는 쿼리 문자열이 포함되지 않은 것으로 보입니다. 물론 documentation을 보았을 때 쿼리 문자열 정보가 포함되어 있지 않고이 업데이트가 추가되지 않았 음을 알았을 것입니다.