jquery는 동적 div를 숨기고 표시합니다.-프런트엔드 Q&A-php.cn

jquery는 동적 div를 숨기고 표시합니다.

WBOY

풀어 주다： 2023-05-18 20:50:06

원래의

1044명이 탐색했습니다.

jQuery는 웹 개발을 위한 풍부한 도구와 기능을 제공하는 빠르고 간결하며 강력한 Javascript 라이브러리입니다. 웹 개발에서 jQuery를 사용하면 웹 사이트를 더욱 아름답고 사용하기 쉽게 만드는 다양한 효과를 얻을 수 있습니다. 그중에서도 동적 div 요소를 숨기고 표시하는 것은 일반적인 요구 사항입니다. 이 기사에서는 이 효과를 얻기 위해 jQuery를 사용하는 방법을 소개합니다.

실제로 요소의 CSS 속성을 변경하는 동적 div 요소를 숨기고 표시합니다. 특히 div 요소를 숨길 때 해당 요소가 표시되지 않도록 표시 속성을 없음으로 설정해야 하며, 요소가 표시되지 않도록 해당 표시 속성을 블록 또는 다른 값으로 설정해야 합니다. 다시 표시됩니다.

jQuery를 사용하면 다음 두 가지 방법을 사용하여 동적 div 요소를 숨기고 표시할 수 있습니다.

hide() 및 show() 메서드 사용

jQuery의 hide() 및 show() 메서드를 사용하는 것이 가장 간단합니다. 가장 직접적인 방법. 이 두 가지 방법은 요소의 CSS 속성을 설정하지 않고도 요소를 직접 숨기고 표시할 수 있습니다.

다음은 hide() 및 show() 메소드를 사용하는 코드 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Hide and Show Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .dynamic-div {
            width: 200px;
            height: 100px;
            background-color: #ccc;
            margin: 50px auto;
            text-align: center;
            line-height: 100px;
            font-size: 24px;
            display: none; /* 默认隐藏 */
        }
    </style>
</head>
<body>
    <button id="hide-btn">Hide</button>
    <button id="show-btn">Show</button>
    <div class="dynamic-div">This is a dynamic div element.</div>
    <script>
        $(document).ready(function() {
            $("#hide-btn").click(function() {
                $(".dynamic-div").hide();
            });
            $("#show-btn").click(function() {
                $(".dynamic-div").show();
            });
        });
    </script>
</body>
</html>

로그인 후 복사

위 코드에서 우리는 div 요소를 동적-div 클래스로 정의하고 표시 속성을 없음(기본값)으로 설정합니다. 이 경우 요소는 숨겨져 있습니다. 그런 다음 hide() 및 show() 메서드를 사용하여 요소를 각각 숨기고 표시하는 두 개의 버튼이 페이지에 추가됩니다. Hide 버튼을 클릭하면 해당 요소가 숨겨지고, Show 버튼을 클릭하면 해당 요소가 다시 표시됩니다.

css() 메서드 사용

hide() 및 show() 메서드를 사용하는 것 외에도 css() 메서드를 사용하여 동적 div 요소의 CSS 속성을 수정할 수도 있습니다. 특히, 요소를 숨기고 표시하는 효과를 얻기 위해 CSS() 메서드를 사용하여 표시 속성을 수정할 수 있습니다.

다음은 css() 메소드를 사용한 코드 예시입니다.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Hide and Show Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .dynamic-div {
            width: 200px;
            height: 100px;
            background-color: #ccc;
            margin: 50px auto;
            text-align: center;
            line-height: 100px;
            font-size: 24px;
            display: none; /* 默认隐藏 */
        }
    </style>
</head>
<body>
    <button id="hide-btn">Hide</button>
    <button id="show-btn">Show</button>
    <div class="dynamic-div">This is a dynamic div element.</div>
    <script>
        $(document).ready(function() {
            $("#hide-btn").click(function() {
                $(".dynamic-div").css("display", "none");
            });
            $("#show-btn").click(function() {
                $(".dynamic-div").css("display", "block");
            });
        });
    </script>
</body>
</html>

로그인 후 복사

위 코드에서는 css() 메소드를 사용하여 .dynamic-div 요소의 표시 속성을 수정하여 숨김 효과를 얻었습니다. 요소를 보여줍니다. Hide 버튼을 클릭하면 해당 요소가 숨겨지고, Show 버튼을 클릭하면 해당 요소가 다시 표시됩니다.

요약

jQuery를 사용하여 동적 div 요소를 숨기고 표시하는 것은 매우 간단합니다. hide() 및 show() 메소드를 사용하여 요소를 직접 숨기고 표시하거나 css() 메소드를 사용하여 요소의 표시 속성을 수정하여 숨기기 및 표시 효과를 얻을 수 있습니다. 페이지에 여러 개의 동적 div 요소가 있는 경우 클래스 또는 ID를 사용하여 숨기거나 표시해야 하는 요소를 지정해야 합니다.

위 내용은 jquery는 동적 div를 숨기고 표시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!