탐색 막대의 활성 링크 뒤에 배경 이미지 넣기

Question

활성 링크의 배경 이미지가있는 탐색 메뉴를 만들려고합니다. 다음 링크를 클릭하면 이미지가 다음 활성 링크로 이동합니다. CSS로만 수행 할 수 있는지 또는 일부 jQuery가 필요한지 확실하지 않습니다.

<div id="header"> 
    <div id="company_name"> 

    </div> 
     <ul id="gen_navigation" class="container_fixed"> 
      <li><a href="#"><span>Home</span></a></li> 
      <li><a href="#"><span>About</span></a></li> 
      <li><a href="#"><span>Technology</span></a></li> 
      <li><a href="#"><span>Applications</span></a></li> 
      <li><a href="#"><span>Benefits</span></a></li> 
      <li><a href="#"><span>Inquiries</span></a></li> 
     </ul> 

</div> 

http://jsfiddle.net/Dk6eq/

참고 : 난 단지 그것은 CSS가 지속 전혀 가지고 있기 때문에 단지 CSS와 함께 할 수없는 순간

Answer 1

에서 기본 CSS와 HTML이 트리거를 "클릭". 클릭 할 때

간단하게 ..., 그런

.active { 
    background-image: url(...) 
} 

처럼 뭔가를 CSS 클래스를 추가

$("#gen_navigation a").on('click', function() { 
    $("#gen_navigation a").removeClass('active'); 
    $(this).addClass('active'); 
}); 

는 클릭 이벤트