MVC3의 호버 효과를위한 배경 이미지가있는 CSS 탐색 메뉴의 활성 페이지

Question

HTML로 간단한 메뉴를 만들었습니다. 그것은 (거의) 완벽하게 작동합니다. 보시다시피 메뉴 항목은 CSS에 설정된 배경 이미지와 연결됩니다. 마우스 오버시 다른 배경 이미지가 표시됩니다.

내 문제는 메뉴 항목을 끊임없이 "선택한"설정을위한 해결책을 찾을 수 없다는 것입니다. 또는 다른 방법으로 말해서 메뉴에 실제 페이지를 표시하지는 않겠습니다.

먼저 HTML과 CSS를 보여 드리겠습니다. 그 후에 나는 내가하려고 한 것을 보여줄 것이다.

<div id="menu"> 
    <a href="@Url.Action("Index","Produkter")" id="menu_produkter"></a> 
    <a href="@Url.Action("Index", "Galleri")" id="menu_galleri"></a> 
    <a href="@Url.Action("Index", "Kontakt")" id="menu_kontakt"></a> 
</div> 

CSS는 다음과 같습니다 : "가져가"아이디의

#menu_produkter 
{ 
    display: block; 
    position: absolute; 
    background: url(images/menu_produkter.png) no-repeat; 
    width: 108px; 
    height: 26px; 
    margin-left: 376px; 
    margin-top: 52px; 
} 

#menu_produkter:hover { 
    background: url(images/menu_produkter_hover.png) no-repeat; 
    cursor: pointer; 
} 

#menu_galleri { 
    display: block; 
    position: absolute; 
    background: url(images/menu_galleri.png) no-repeat; 
    width: 64px; 
    height: 26px; 
    margin-left: 496px; 
    margin-top: 52px; 
} 

#menu_galleri:hover { 
    background: url(images/menu_galleri_hover.png) no-repeat; 
    cursor: pointer; 
} 

#menu_kontakt { 
    display: block; 
    position: absolute; 
    background: url(images/menu_kontakt.png) no-repeat; 
    width: 85px; 
    height: 26px; 
    margin-left: 572px; 
    margin-top: 52px; 
} 

#menu_kontakt:hover { 
    background: url(images/menu_kontakt_hover.png) no-repeat; 
    cursor: pointer; 
} 

나는 같은 배경 이미지 #menu_xxxx_on라는 각 항목에 대한 CSS 아이디의를 추가하려고했습니다.

그런 다음 ViewBag.CurrentPage = "xxxx"를 내보기의 맨 위에 설정했습니다. 마지막으로 면도기를 사용하여 현재 페이지가 어떤 페이지인지 확인합니다.

$<a href="@Url.Action("Index", "Produkter")" id="menu_produkter@{if(ViewBag.CurrentPage.Equals("Salonen")) {<text>_on</text>}}"></a>* 

나는 그럴 수 있었지만 메뉴 항목은 완전히 사라졌습니다. 나는 무엇이 잘못되었는지 알아보기 위해 구글 크롬으로 '요소 검사'를 시도했다. 모든 CSS 속성을 다시 설정하는 것처럼 보입니다.

쉽게 해결할 수 있습니까? 아니면 다른 방식으로해야합니까? 나는 custom html-helpers로 다른 솔루션을 보았습니다.하지만 이런 식으로 할 수 있다면 조금 과잉이라고 생각합니다.

미리 감사드립니다.

Answer 1

당신이 다음 예를 들어 jQuery를 기능을 사용하는 클래스와 그것을 해결하려면 다음

$(function(){ 
var id = $('hiddenId').val(); 
$('#'+id).addClass("someClass"); 
}); 

이 someClass에서 선택한 메뉴 탭 스타일을 정의합니다. 선택된 메뉴의

이드가 ViewBag를 사용하여 전송하고 렌더링을에 HiddenField에서 ID로 할 수 innerHTML을 함께 조작

@Html.Hidden("hiddenId",(object)ViewBag.CurrentPage) 

hiddenId하지만 제안, 다음의 jQuery 기능은 다음과 같아야합니다

$(function(){ 
    var id = $('hiddenId').val(); 
    var header = $('#'+id).html(); 
    $('#'+id).html(header+'-on'); 
    });