jquery를 사용하여 클래스를 적용하는 탐색

Question

탐색 패널에서 jQuery를 사용하여 CSS를 적용하는 데 문제가 있습니다. 사용자가 링크를 클릭하면 .selected 클래스가 적용됩니다.

내 HTML 코드는

<ul id="example-two"> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">People</a></li> 
     <li><a href="#">Career</a></li> 
     <li><a href="#">Contact Us</a></li> 
     <li><a href="#">Videos</a></li> 
    </ul>  

내 CSS 코드가

#example-two li a { 
    position: relative; 
    z-index: 200; 
    background-image: -moz-linear-gradient(#6C6C6C, #4A4A4A); 
    border-radius:10px; 
    color: #FFF; 
    font-size: 14px; 
    display: block; 
    float: left; 
    padding: 6px 10px 4px 10px; 
    text-decoration: none; 
    text-transform: uppercase; 
} 
#example-two li a:hover { 
    background-image: -moz-linear-gradient(#ed2024, #c8171a); 
    color: white; 
} 

.selected{ 
    background-image: -moz-linear-gradient(#ed2024, #c8171a); 
    color: white; 
} 

입니다 그리고 내 jQuery 코드는

<script> 
$(document).ready(function() { 
    $('ul#example-two li a').click(function() { 
     $('ul#example-two li a').removeClass("selected"); 
     $(this).addClass("selected"); 
    }); 
}) 
</script> 

어떤 생각입니다, 어디 잘못 갈거야?

Answer 1

상단 CSS 선택기에서 배경 이미지 값을 무시하고 있습니다. CSS 우선 순위에 대한 자세한 내용은 here을 참조하십시오.

변경 .selected

http://jsfiddle.net/EuuhZ/1/