ASP .NET MVC에서 jquery를 사용하여 CSS 요소를 html 요소에 적용하는 방법은 무엇입니까?

Question

스택 오버플로와 같은 탭 메뉴를 구현하려고합니다. HTML 목록을 만들고 CSS를 사용하여 탭 메뉴처럼 보이도록 스타일을 지정했습니다. 마스터 페이지에 HTML 목록을 추가했습니다. 이제는 사용자가 클릭하면 어떻게 목록의 색상을 변경합니까?

예를 들어 스택 오버플로 "사용자"탭 메뉴를 클릭하면 "사용자"인덱스보기로 리디렉션되고 탭 메뉴의 색이 주황색으로 바뀝니다. 이것을 어떻게 성취합니까?

$("#MyElement").addClass(classname); 
$("#MyElement").removeClass([classname]); 
$("#MyElement").toggleClass(classname); 

당신은 removeClass에 매개 변수를 전달할 수 있습니다, 또는 상단을 위해 빈

http://docs.jquery.com/Attributes/toggleClass

Answer 1

당신은 이것에 대해 Jquery를 사용하지 않아야합니다. 이유는 Javascript를 실제로 사용하는 설명이 명확한 이유가 없기 때문입니다.

동적 같은 현재 페이지 버튼의 클래스를 설정하여 마스터 페이지에해야 할 일은 :

Request.Url 

에 액세스하여

<li class="selected">Home</li> 
<li>Users</li> 
... 

당신은 현재의 URL을 찾을 수 있습니다 그런 다음 CSS 클래스를 만들어 변경 사항을 표시하십시오.

여기에 자바 스크립트가 필요 없습니다. 나는 JQuery도 좋아하지만, 너무 쉽게 접근 할 수있는 솔루션을 사용하기보다는 사람들이 사용하려고하는 핑계를 너무 자주 시도합니다. 기억 모든 사람이 사용할 수있는 자바 스크립트

Answer 2

당신은 추가 할 때라도 funcitons을 사용할 수 있습니다/클래스를 제거 그렇게하면 내비게이션 수준의 내비게이션은 다음과 같이 보입니다. 질문 지역 :

<ul> 
    <li class="youarehere"><a href="/questions">Questions</a></li> 
    <li><a href="/tags">Tags</a></li> 
    <li><a href="/users">Users</a></li> 
    <li><a href="/badges">Badges</a></li> 
    <li><a href="/unanswered">Unanswered</a></li> 
</ul> 

질문 텍스트가 포함 된 li 요소에 연결된 youarehere 클래스에 주목하십시오. 해당 클래스 뒤의 CSS 정의는 "버튼"을 주황색으로 바꿉니다. youarehere 클래스 (또는 프로젝트에 해당하는 클래스)는 마스터 페이지의 서버 코드로 추가하거나 James Wiseman이 지적했듯이 브라우저의 jQuery를 통해 추가 할 수 있습니다.

Answer 3

HTML 소스를 떠나 :

Answer 4

내가 SO 그러나 이것은 일반적으로 작동하는 방법의 라인을 따라 각 페이지에 대해 다른 HTML을 생성하는 것입니다에 대해 말할 수

:

<ul class="tabs> 
    <li><a href="/tab1">Tab 1</a></li> 
    <li class="on"><a href="/tab2">Tab 2</a></li> 
    <li><a href="/tab3">Tab 3</a></li> 
</ul> 

이 클래스 = "On"으로 나타내는 경우 선택한 탭의 다른 스타일. 같이 선택할 수 컨트롤러 액션의 각각의 원하는 탭의 값을 설정에 다음

<ul class="tabs> 
    <li <%= ViewData["CurrentTab"] == "Tab1" ? "class=\"on\"" : "" %>><a href="/tab1">Tab 1</a></li> 
    <li <%= ViewData["CurrentTab"] == "Tab2" ? "class=\"on\"" : "" %><a href="/tab2">Tab 2</a></li> 
    <li <%= ViewData["CurrentTab"] == "Tab3" ? "class=\"on\"" : "" %>><a href="/tab3">Tab 3</a></li> 
</ul> 

: 지금 당신은 정말 당신처럼 마스터 페이지에 배치 할 수 있도록 모든 페이지에 대해이 작업을 수행하지 않으려는 :

ViewData["CurrentTab"] = "Tab2"; 

당신은 마스터 페이지에서 현재 URL을 테스트 할 수 있지만 여러 URL이 동일한 탭을 선택해야하는 경우이 방법이 좀 더 유연성을 제공합니다.

나는 클라이언트 측 설정에 대한 필요성을하지만 제임스 와이즈만 같은 JQuery와 사용하는 데 필요한 경우 말했다하지 않습니다

$("#Tab1").addClass('on'); // or 
$("#Tab1").removeClass('on'); // or 
$("#Tab1").toggleClass('on');