목록 안의 앵커 탭의 클래스 이름 변경

Question

작은 쿼리가 있습니다.

<ul class="navigation"> 
     <li><a href="#home">Home<span class="ui_icon home"></span></a></li> 
     <li><a href="#aboutus">About Us<span class="ui_icon aboutus"></span></a></li> 
     <li><a href="#services">Services<span class="ui_icon services"></span></a></li> 
     <li><a href="#gallery">Gallery<span class="ui_icon gallery"></span></a></li> 
     <li><a href="#contactus">Contact Us<span class="ui_icon contactus"></span></a></li> 
    </ul> 

이 코드는 인터넷에서 가져온 것입니다. 다음 페이지로 스크롤하면 페이지가 스크롤됩니다. 및 선택한 목록 항목 자체가 업데이트됩니다. 그러나 Asp.net 마스터 페이지에서이 템플릿을 구현하려고하면 목록 항목이 업데이트되지 않습니다. 그래서 내가 무엇을 할 수 있니? 제안 사항이 있으십니까? 아래

당신이 클릭 된 앵커에 클래스 selected을 설정하고 다른 앵커에서 제거하려면 템플릿

ul.navigation a:hover, ul.navigation a.selected { 
    color: #201f1b; 
    background: url(../images/templatemo_menu_hover.png) no-repeat left; 
} 

Answer 1

에서 제공하는 CSS의 기본이며, 다음 사용

$('.navigation li a').click(function(e) { 
    e.preventDefault(); 
    $('.navigation li a').removeClass('selected'); 
    $(this).addClass('selected'); 
}) 

Fiddle Demo

Answer 2

'on click'기능을 사용하여 요소는 아래의 코드 시도 :

$(".navigation li a").on("click", function (event) { 
    //prevents the browser from going to a new URL 
     event.preventDefault(); 
    //removes selected class from all elements 
     $('.navigation li a').removeClass('selected'); 
    //adds selected class to element you click 
     $(this).addClass('selected'); 
}); 

나는 CSS에서 배경 색상 매개 변수를 사용 그래서 나는 당신의 이미지에 액세스 할 수 없습니다를

jsfiddle 예 :를 게시하는 점을 무엇 http://jsfiddle.net/9Jjud/