활성 메뉴 항목을 관리하기 위해 jQuery를 사용하여 클릭 시 CSS 클래스를 어떻게 전환할 수 있습니까?-CSS 튜토리얼-php.cn

활성 메뉴 항목을 관리하기 위해 jQuery를 사용하여 클릭 시 CSS 클래스를 어떻게 전환할 수 있습니까?

Mary-Kate Olsen

풀어 주다： 2024-11-25 05:43:17

원래의

331명이 탐색했습니다.

How Can I Toggle CSS Classes on Click Using jQuery to Manage Active Menu Items?

jQuery를 사용하여 클릭 시 CSS 클래스 전환

jQuery를 사용하여 클릭 이벤트에서 CSS 클래스를 동적으로 추가 및 제거하려면 다음을 살펴보겠습니다. issue.

문제: 메뉴는 특정 클래스가 활성화됩니다. 항목을 클릭하면 해당 항목에만 클래스가 추가되고 다른 항목에서는 클래스가 제거되어야 합니다. 처음에는 "about-link"에 기본적으로 "current" 클래스가 있어야 합니다.

해결책:

이 문제를 해결하려면 다음 jQuery를 활용할 수 있습니다. 코드:

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

로그인 후 복사

이 코드에서는:

$('#menu li a') 모든
내의 요소 ID가 "menu"인 요소의 하위 요소입니다.

.on('click', function())은 이러한 요소에 대한 클릭 이벤트 리스너를 등록합니다.

이벤트 핸들러 내부 , .removeClass('current')는 현재 활성 요소에서 "현재" 클래스를 제거합니다.

.addClass('current')는 "현재" 클래스를 클릭한 요소.

이 접근 방식을 따르면 "about-link"에는 처음에 $('#about-link').addClass('current를 사용하여 "현재" 클래스가 할당됩니다. ');. 메뉴 내 다른 항목을 클릭하면 "현재" 클래스가 이전 활성 항목에서 제거되고 클릭한 항목에 추가되어 항상 하나의 항목만 활성 상태로 유지됩니다.

위 내용은 활성 메뉴 항목을 관리하기 위해 jQuery를 사용하여 클릭 시 CSS 클래스를 어떻게 전환할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!