jquery 세트 li이 선택됨-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

jquery 세트 li이 선택됨

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 12, 2023 am 11:06 AM

페이지 개발을 위해 jQuery를 사용할 때 목록에서 특정 li 요소의 선택 상태를 설정해야 하는 경우가 많습니다. 이 설정은 상태 전환이 필요한 일부 페이지에 매우 중요합니다. 이 기사에서는 jQuery를 사용하여 li 선택 상태를 설정하는 방법을 설명합니다.

먼저 명확하게 해야 할 점은 li 선택 상태를 설정하려면 스타일을 정의한 다음 jQuery를 통해 필수 li 요소에 스타일을 적용해야 한다는 것입니다. 이런 식으로 선택하려는 li 요소를 클릭하면 스타일을 추가하거나 삭제하여 선택 상태를 전환할 수 있습니다.

다음은 코드 예시입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置li选中状态</title>
    <style type="text/css">
        .selected {
            background-color: #f5f5f5;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            $('ul li').click(function() {
                $('ul li').removeClass('selected');
                $(this).addClass('selected');
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>
    </ul>
</body>
</html>

로그인 후 복사

위 코드는 간단한 옵션 목록을 구현하고 선택한 상태에 대한 스타일을 추가합니다. 목록에서 옵션을 클릭하면 선택된 상태가 jQuery 코드를 통해 전환됩니다.

구체적으로는 jQuery의 click() 메서드를 사용하여 각 li 요소의 클릭 이벤트를 수신한 다음 이벤트 핸들러 함수에서 먼저 목록에 있는 모든 li 요소의 선택된 스타일을 제거한 다음 현재 클릭된 li를 제거합니다. 선택한 상태를 전환하려면 선택한 스타일을 요소에 추가하세요.

또 다른 주목해야 할 점은 스타일 시트에서 CSS 클래스를 미리 정의하기 위해 addClass() 및 RemoveClass() 메서드를 사용하여 CSS 클래스를 추가 및 제거한 다음 jQuery에서 클래스 이름을 사용하여 선택을 제어한다는 것입니다. 상태의 스타일.

실제 개발 과정에서 실제 필요에 따라 선택기를 유연하게 변환하고 맞춤 설정할 수도 있습니다. 예를 들어, ID, 속성, 태그 이름 등 다양한 방법을 통해 동작할 li 요소를 선택할 수 있습니다. 또한 사용자 정의 속성, 데이터 속성 등을 결합하여 더 복잡한 논리를 처리할 수도 있습니다.

간단히 말하면, jQuery를 사용하여 li의 선택된 상태를 설정하는 것은 매우 간단합니다. 상태 전환이 필요한 옵션 목록과 같은 구성 요소를 구현하려면 몇 가지 기본적인 jQuery 지식만 익히면 됩니다.

위 내용은 jquery 세트 li이 선택됨의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.