jQuery를 사용하여 클릭 시 CSS 클래스를 추가 및 제거하는 방법은 무엇입니까?

jQuery를 사용하여 클릭 시 클래스를 추가하고 제거하는 방법은 무엇입니까?

jQuery에서는 addClass( ), 제거클래스() 및 토글클래스() 메서드를 사용합니다. 이는 활성 상태 추가 또는 제거 또는 메뉴 항목 강조 표시와 같은 동적 동작을 구현하는 데 유용할 수 있습니다.

예: 클릭 시 클래스 추가 및 제거

메뉴에는

강요. 다른 모든 요소에서는 제거하면서 클릭한 요소에 "현재" 클래스를 추가하려고 합니다. 이렇게 하면 한 번에 하나의 요소만 "현재" 클래스를 갖게 됩니다.

다음은 jQuery 솔루션입니다.

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

이 코드는 이벤트 위임을 사용하여 모든 ID가 'menu'인 컨테이너 내의 요소입니다. 요소를 클릭하면 "현재" 클래스가 자체에 추가되고 siblings() 메서드를 사용하여 모든 형제 요소에서 동일한 클래스가 제거됩니다.

추가 고려 사항: "현재" 클래스 초기화

처음에는 메뉴 항목 중 하나에 "현재" 클래스를 설정하려고 합니다. 다음을 사용하여 이 작업을 수행할 수 있습니다.

$('#about-link').addClass('current');

ID가 "about-link"인 요소에 "현재" 클래스를 추가하여 해당 요소가 활성 항목으로 시작되도록 합니다.

향상된 솔루션

다음은 code:

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

이전 코드와 유사하게 작동하지만

내의 요소 항목. 기본적으로

요소에는 href 속성이 없으므로 클릭 이벤트가 직접 실행되지 않습니다.

위 내용은 jQuery를 사용하여 클릭 시 CSS 클래스를 추가 및 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!