jquery와 css로 비활성 메뉴에서 배경 이미지 제거

Question

jquery와 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> 

내가 다음에 끼 었어 : 때 "리 전 메뉴를

$(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 코드를 만드는 데 사용했던 코드를 아래

(rgt-aerow-img.gif)이 다른 모든 "li"에서 숨겨져 있어야합니다. 이 이미지 (rgt-aerow-img.gif)는 활성 "li"을 제외한 모든 "li"에서 제거해야합니다. imeages 수 있습니다 viewed here

Answer 1

나는 당신이 여기에 무슨 일을하는지 알 것 같아요.

클릭 기능에서 수행하고자하는 작업은 모두 $ ("# workflow_menu li")와 같이 공유하거나 타겟팅하는 클래스를 대상으로합니다. 링크 텍스트를 타겟팅하려는 경우 $ ("# workflow_menu li a")로 설정할 수 있습니다. 또는 전체 목록 항목을 링크로 만들려면 display : block을 "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로하고있는 것을 할 수 있다면, 당신은 더 나을 것입니다. 희망이 도움이됩니다.