jQuery의 `addClass()` 및 `removeClass()`를 사용하여 한 번에 하나의 목록 항목만 강조 표시하는 방법은 무엇입니까?

jQuery를 사용하여 클릭 시 클래스 추가 및 제거

목록 메뉴 항목으로 작업할 때 현재 활성 항목을 강조 표시하는 것이 바람직한 경우가 많습니다. 수업 추가. 그러나 한 번에 하나의 항목에만 클래스가 있는지 확인하는 데 어려움이 있을 수 있습니다.

이 문제를 해결하려면 jQuery의 addClass() 및 RemoveClass() 메서드를 사용하세요. 처음에는 'about-link'와 같은 원하는 시작 요소에 클래스를 추가합니다. 그런 다음 목록 항목('menu li')에서 이벤트 리스너를 사용하여 클릭을 처리합니다.

이벤트 리스너 내에서 siblings() 메서드를 활용하여 다른 모든 목록 항목 요소에서 클래스를 제거합니다. 이렇게 하면 클릭한 요소만 클래스를 유지하게 됩니다. 그러나 'about-link'가 활성화된 상태로 시작하려면 추가 코드 줄을 추가해야 합니다.

$('#menu li a').on('click', function(){
    $('#menu li a.current').removeClass('current');
    $(this).addClass('current');
});

이 수정된 코드에서는 목록 항목(' 메뉴 li a')를 사용하여 링크를 타겟팅하고 있는지 확인합니다. 그런 다음 현재 클래스를 선택기로 사용하여 클릭한 링크에 추가하기 전에 이전 활성 링크에서 제거합니다. 이렇게 하면 초기 JavaScript에서 'about-link'에 클래스를 수동으로 추가할 필요가 없습니다.

위 내용은 jQuery의 `addClass()` 및 `removeClass()`를 사용하여 한 번에 하나의 목록 항목만 강조 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!