jQuery를 사용하여 메뉴 항목의 단일 활성 클래스를 동적으로 전환하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

jQuery를 사용하여 메뉴 항목의 단일 활성 클래스를 동적으로 전환하려면 어떻게 해야 합니까?

Linda Hamilton

풀어 주다： 2024-11-25 13:58:11

원래의

411명이 탐색했습니다.

How Can I Use jQuery to Dynamically Toggle a Single Active Class on Menu Items?

jQuery를 사용하여 메뉴 항목의 클래스를 동적으로 전환

이 게시물에서는 다음과 같은 경우 동적으로 클래스를 추가하고 제거하려는 시나리오를 접하게 됩니다. 특정 메뉴 항목을 클릭했습니다. 목표는 일반적인 메뉴 탐색 동작을 모방하여 한 번에 하나의 활성 클래스를 유지하는 것입니다.

이를 달성하기 위해 처음에는 '현재' 클래스를 'about-link'에 추가하여 초기 활성 클래스를 지정합니다. 상태. 그런 다음 이벤트 리스너를

메뉴 내의 요소.

클릭하면 '현재' 클래스를 얻고, 형제 클래스는 클래스를 제거하여 독점성을 보장합니다.

그러나 처음부터 활성 상태를 적절하게 반영하기 위해 접근 방식을 개선할 수 있습니다. '현재' 클래스를 'about-link'에 직접 추가하는 대신, 현재 해당 클래스를 소유하고 있는 메뉴 내의 기존 'a' 요소에서 '현재' 클래스를 먼저 제거하는 수정된 이벤트 핸들러를 활용할 수 있습니다. 그런 다음 클릭한 요소에 '현재' 클래스를 추가합니다. 이러한 조정은 'about-link'가 '현재' 클래스 없이 시작하고 메뉴 상호 작용 전반에 걸쳐 원하는 단일 활성 상태를 유지하도록 보장합니다.

다음은 다음과 같이 개선된 향상된 jQuery 코드입니다.

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

로그인 후 복사

이 접근 방식은 메뉴가 기본 상태에서 'about-link'로 시작하고 다른 메뉴 항목을 클릭할 때 활성 클래스를 동적으로 전환하여 원하는 항목을 준수하도록 보장합니다. 기능을 제공합니다.

위 내용은 jQuery를 사용하여 메뉴 항목의 단일 활성 클래스를 동적으로 전환하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!