jquery는 컨트롤의 숨겨진 표시를 구현합니다.-프런트엔드 Q&A-php.cn

jquery는 컨트롤의 숨겨진 표시를 구현합니다.

PHPz

풀어 주다： 2023-05-24 21:22:05

원래의

766명이 탐색했습니다.

jQuery는 프런트엔드 개발에 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 이 기사에서는 jQuery를 사용하여 컨트롤을 숨기고 표시하는 방법을 소개합니다.

먼저 HTML 페이지에 jQuery 라이브러리를 도입해야 합니다. 온라인으로 가져오거나 로컬로 다운로드하도록 선택할 수 있습니다.

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

로그인 후 복사

다음으로 jQuery에서 선택하고 조작할 수 있도록 숨기거나 표시해야 하는 컨트롤에 ID 또는 클래스를 추가하세요.

<div id="myDiv">
    这是需要隐藏或显示的内容
</div>

<button class="myButton">点击显示/隐藏</button>

로그인 후 복사

ID가 "myDiv"인 DIV와 클래스가 "myButton"인 버튼을 추가했습니다.

그런 다음 JavaScript 코드에서 jQuery 메서드를 사용하여 표시하거나 숨겨야 하는 컨트롤을 선택하고 해당 CSS 속성을 추가하세요.

$(document).ready(function(){
    $(".myButton").click(function(){
        $("#myDiv").toggle();
    });
});

로그인 후 복사

먼저 문서가 준비된 후 코드를 실행하기 전에 페이지 요소가 로드되었는지 확인하기 위해 $(document).ready() 메서드를 사용합니다.

그런 다음 선택기 $(".myButton")를 통해 버튼을 선택하고 버튼에 클릭 이벤트를 추가합니다. 버튼을 클릭하면 콜백 함수가 실행됩니다.

콜백 함수에서는 선택기 $("#myDiv")를 사용하여 숨기거나 표시해야 하는 DIV를 선택하고 토글() 메서드를 사용하여 표시 상태를 전환합니다. 이 메소드는 CSS 속성 "display"의 값을 자동으로 수정하여 요소를 표시하거나 숨깁니다.

더 세밀한 제어가 필요한 경우 show() 및 hide() 메서드를 사용하여 요소를 각각 표시하고 숨길 수 있습니다.

$(document).ready(function(){
    $(".myButton").click(function(){
        $("#myDiv").toggle();
        // $("#myDiv").show();
        // $("#myDiv").hide();
    });
});

로그인 후 복사

위는 jQuery를 사용하여 컨트롤을 숨기고 표시하는 방법입니다. 선택기와 CSS 속성을 수정하면 페이지 요소의 표시 상태를 빠르게 제어할 수 있어 상호 작용이 더욱 친숙하고 유연해집니다.

위 내용은 jquery는 컨트롤의 숨겨진 표시를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!