는 UL

2014-03-31 4 views 0 likes

에서 선택한 리튬 항목의 배경 색상을 변경할 수 없습니다 나는 는 UL

가 어떻게 내 UL 목록에서 선택 LI 항목의 (jQuery를 사용하여) 배경을 변경할 수 있습니다, 여러분의 도움이 필요합니다. 지금 당장은 내 목록의 전체 배경이 변경됩니다. 마지막으로주의해야 할 점은 새 LI 항목을 선택해야 색이 흰색으로 지정되어야한다는 것입니다.

<!DOCTYPE html> 

<html> 
<script src="jquery.min.js"></script> 
<head> 

<style type="text/css"> 
#container { 
    width: 200px; 
} 
#list1 { 
    border: 1px solid red; 
    width: 100%; 
} 
#list1 ul { 
    margin: 0; 
    padding: 3px; 
    list-style-type: none; 
} 
#list1 li { 
    cursor: default; 
} 
.selected { 
    background: blue; 
} 
</style> 

<script type="text/javascript"> 
window.onload = function() { 

$('#list1').click(function(){ 
    var that = $(this); 
    that.closest('li').find('.selected').removeClass('selected'); 
    that.addClass('selected'); 
}); 

} 
</script> 

</head> 

<body> 

<div id="container"> 
    <div id="list1"> 
     <ul> 
      <li>Coffee</li> 
      <li>Tea</li> 
      <li>Milk</li> 
     </ul> 
    </div> 
</div> 
</body> 

</html>

출처

2014-03-31 user1451890

클릭 이벤트 처리기를 상위 항목이 아닌 목록 항목에 연결합니다. 'that.addClass' 'selected ')'는 항상 부모 div에 클래스를 추가합니다. – j08691

답변

이 시도 :이 작업에 대한 새로운 요소를 선택해야 할 이유가

var $items = $('#list1 li').click(function() { 
    $items.removeClass('selected'); 
    $(this).addClass('selected'); 
});

없습니다. 모든 목록 항목 ($items))의 컬렉션을 만들고 이전 항목의 selected 클래스를 제거하기 위해 다시 사용하십시오.

출처

2014-03-31 16:54:06 jmar777

당신은 #list1 이후 여기 .closest() 필요가 없습니다 귀하의 li의 조상이다 :

that.find('li.selected').removeClass('selected');

그러나 실제로, 나는 무엇을 당신이하려는 것은 li을 클릭 할 .active을 추가하는 것입니다 생각 다른 li에서이 active 클래스를 삭제하면 다음과 같이 처리 할 수 있습니다.

$('#list1 ul li').click(function() { 
    $('#list1 ul li').removeClass('selected'); 
    $(this).addClass('selected'); 
});

Fiddle Demo

출처

2014-03-31 16:51:00 Felix

는 UL

답변

관련 문제