jquery和css從無效菜單中刪除背景圖像

Question

我正在使用jQuery和CSS來製作菜單。默認情況下，第一次加載頁面時，第一個菜單處於活動狀態（活動菜單的背景很暗），如果我點擊其他菜單，它應該是黑暗的，之前是正常的。

下面，我已經使用，使菜單

$(document).ready(function() { 

    $('.tab_title').click(function() { 
     $('.tab_title').removeClass('active').next(); 
     $(".tab_title_arrow").removeClass('active_arrow').next(); 
     $(this).addClass('active'); 
     $(".tab_title_arrow").addClass('active_arrow'); 
    }); 
}); 

CSS代碼代碼：

.tab_title { 
    background: url(images/lft-white-repeat.gif) repeat-x; 
    height: 50px; 
    width:auto; 
    float: left;  
} 

.tab_title_arrow { 
    background: url(images/white-aerow.gif) no-repeat; 
    height: 50px; 
    width: 21px; 
    float: left;  
} 

.active { 
    background: url(images/tab-repeat-blue.gif) repeat-x; 
    height: 50px; 
    width:auto; 
    float: left;  
} 

.active_arrow { 
    background: url(images/rgt-aerow-img.gif) no-repeat; 
    height: 50px; 
    width: 21px; 
    float: left; 
} 

#workflow_menu { 
    color:#000; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    padding:5px; 
    font-weight:bold; 
    list-style: none; 
} 

#workflow_menu li { 
    float: left; 
} 

HTML：

<ul id="workflow_menu"> 
    <li> 
     <a href="#"><img src="images/tab-left.gif" /> 
     </a> 
    </li> 
    <li> 
     <a href="#" id="subset_criterion"> 
      <div class="tab_title active">Subset Criterion 
      </div> 
      <div class="tab_title_arrow active_arrow"> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a href="#" id="analytical_base_tables"> 
      <div class="tab_title">Analytical Base Tables 
      </div> 
      <div class="tab_title_arrow"> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a href="#" id="data_exploration"> 
      <div class="tab_title">Data Exploration 
      </div> 
      <div class="tab_title_arrow"> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a href="#" id="models"> 
      <div class="tab_title">Models 
      </div> 
      <div class="tab_title_arrow"> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a href="#" id="model_evalution"> 
      <div class="tab_title">Model Evalution 
      </div> 
      <div class="tab_title_arrow"> 
      </div> 
     </a></li> 
    <li> 
     <a href="#"> 
      <img src="images/right-tab.gif" /> 
     </a> 
    </li> 
</ul> 

我被困在下面： 當「李「是活動的（點擊）圖像（rgt-aerow-img.gif）應該隱藏其他所有」李「。這個圖像（rgt-aerow-img.gif）應該從所有其他「li」中除去，除了活動的「li」。 imeages可以是viewed here

Answer 1

我想我知道你要去這裏。

你想要在你的點擊功能中做什麼是針對一個他們都分享或定位它的類，如$（「＃workflow_menu li」）。如果要定位鏈接文本，您可能需要將其設置爲$（「＃workflow_menu li a」）。或者，如果您希望整個列表項目成爲鏈接，請將「display：」塊添加到「li」中的「a」中。無論如何...

$("#workflow_menu li").click(function(){ //when you click a list item. 
    $("#workflow_menu li").css('background-color','white'); //change all to white 
    $(this).css('background-color','black'); //change the one i click to black 
}); 

它看起來像你使用的圖像，但它是基本的想法。實際上，如果你可以用css做你正在做的事情，你會過得更好。希望這可以幫助。