jquery - 클릭하면 메뉴 링크를 강조 표시하는 방법?

Question

링크가있는 메뉴가 있습니다. 링크는 테이블 안에 있습니다. 각 링크는 <td>에 있습니다. 활성화 될 때 <td>의 배경색을 변경하고 싶습니다. 나는 jquery에서 그것을 어떻게 할 것인가?

다음은 내 코드 링크 http://jsfiddle.net/DdG8m/입니다.

내 문제는 하나의 링크를 클릭하면 전체 테이블의 배경색이 변경된다는 것입니다. 도와주세요. 미리 감사드립니다.

Answer 1

선택자와 일치하는 모든 요소가 아닌 현재 요소를 참조해야합니다.

$("#mainMenu td").click(function() { 
    $(this).css('background-color', '#EDEDED'); 
}); 

이렇게 CSS 속성을 설정하는 대신 CSS 클래스를 사용하는 것이 좋습니다.

그러면 다음과 같이됩니다.

$("#mainMenu td").click(function() { 
    $(this).addClass('selected'); 
}); 

;

#mainMenu td.selected { 
    background-color: #EDEDED; 
} 

편집

선택 :visited는 링크 (a)를 사용할 수 있어야하고 table 당신이 정말 필요 이상이야 사용하지 말아야들의 유사.

전체 부모 li 요소를 채우기 위해 링크에 ul 목록 대신 테이블과 display: block를 사용하는 jsFiddle을 만들었습니다.

나는 또한 페이지를 다시로드하고 선택한/활성 링크에 대한 클래스를 포함하지 않기 때문에 링크를 따르지 않으므로 event.preventDefault()을 사용하고 있습니다. 링크를 따라 페이지를 다시로드하려면 서버 측 코드를 사용하여 해당 HTML을 렌더링해야합니다.

$("#mainMenu a").click(function(e) { 
    e.preventDefault(); // Don´t follow the link 
    $("#mainMenu a").removeClass('selected'); // Remove class on all menu items 
    $(this).addClass('selected'); // Add class to current menu item 
}); 

Answer 2

현재 코드는 테이블의 모든 TDS 변경됩니다

$(function() { 
    $("#mainMenu td").click(function() { 
     $("#mainMenu td").css('background-color', '#EDEDED'); 
    }); 

}); 
​ 

입니다. 대신 함수 내에 $(this)을 사용하여 click 이벤트를 트리거 한 요소를 선택하십시오.

$(function() { 
    $("#mainMenu td").click(function() { 
     $(this).css('background-color', '#EDEDED'); 
    }); 

}); 
​ 

은 다른 사람이 클릭 제외한 모든 TDS를 선택 siblings() 선택기를 사용하여 되돌릴 수 있도록합니다.그럼 그냥 따라 클래스를 추가/제거

$(function() { 
    $('td').click(function() { 
     $(this).css('backgroundColor', '#EDEDED'); 
    }); 
}); 

Answer 3

이 시도 http://jsfiddle.net/DdG8m/4/

$(function() { 
    $('#mainMenu td').click(function(e) { 
     $('#mainMenu td').removeClass('highlight'); 
     $(this).addClass('highlight'); 
    }); 
}); 

참고 :.highlight 클래스의 !important을 사용하여 기본값을 재정의해야합니다.

Answer 4

이 .highlight라는 클래스를 만들고 원하는 배경색으로 설정 :

$(function() { 
    $("#mainMenu td").click(function() { 
     $(this).css('background-color', '#EDEDED') 
     .siblings().css('background-color', '#FFFFFF'); 
    }); 
});