jQuery를 사용하여 메뉴 항목의 활성 상태를 관리하려면 어떻게 해야 합니까?

jQuery로 메뉴 항목 상태 변경

이번 게시물에서는 jQuery의 기능을 활용하여 클래스를 동적으로 관리하는 방법을 살펴보겠습니다. 메뉴 내 목록 항목의 스타일. 목표는 클릭 시 특정 목록 항목에 '현재' 클래스를 추가하고 다른 모든 항목에서 동시에 제거하는 것입니다.

초기 설정

기능을 시작하려면 , 먼저

를 사용하여 메뉴 항목을 정의해야 합니다. 태그를 사용하는 요소와 링크. 처음에 선택한 항목을 나타내기 위해 목록 항목 링크 중 하나에 '현재' 클래스를 추가하겠습니다.

<ul>

이벤트 리스너 추가

jQuery 사용 , 클릭을 처리하기 위해 각 목록 항목의 링크에 이벤트 리스너를 연결합니다. 이벤트:

$('#menu li a').on('click', function() {
  // Add 'current' class to this list item
  $(this).addClass('current');
  
  // Remove 'current' class from all other list items
  $('#menu li a.current').not(this).removeClass('current');
});

설명

이벤트 리스너 내에서 jQuery 코드 조각은 다음 작업을 수행합니다.

1. ' 현재' 클래스를 클릭한 목록 항목의 링크에 사용합니다. $(this).addClass('current').
2. $('#menu li a.current').not(this).removeClass를 사용하여 다른 모든 목록 항목 링크에서 '현재' 클래스를 제거합니다. ('현재의'). 이 줄은 '현재' 클래스가 있는 모든 링크를 선택하고 현재 클릭한 링크를 제외합니다.

결과

결과적으로, 사용자가 링크를 클릭하면 메뉴 항목의 링크에는 '현재' 클래스 스타일이 적용되는 반면, '현재' 클래스는 이전 활성 항목에서 제거됩니다. 이렇게 하면 주어진 시간에 단 하나의 목록 항목 링크에만 현재 스타일이 적용됩니다.

위 내용은 jQuery를 사용하여 메뉴 항목의 활성 상태를 관리하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!