將背景圖像放在導航欄上的活動鏈接後面

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和HTML的時刻

Answer 1

它不能只用CSS因爲CSS沒有持續進行 「點擊」 觸發器。

只需添加一個CSS類，像

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

然後，當你點擊...

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