Home > Article > Web Front-end > jquery implements hidden display of controls

jquery implements hidden display of controls

PHPzOriginal: 2023-05-24 21:22:05731browse

jQuery is a popular JavaScript library that is widely used in front-end development. This article will introduce how to use jQuery to hide and show controls.

First, we need to introduce the jQuery library into the HTML page. You can choose to import it online or download it locally.

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

Next, add an ID or Class to the controls that need to be hidden or displayed so that they can be selected and manipulated in jQuery.

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

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

Added a DIV with ID "myDiv" and a button with Class "myButton".

Then, use the jQuery method in the JavaScript code to select the controls that need to be shown or hidden, and add the corresponding CSS properties.

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

First, we use the $(document).ready() method after the document is ready to ensure that the page elements are loaded before executing the code.

Then, we select the button through the selector $(".myButton") and add a click event to the button. When the button is clicked, the callback function is executed.

In the callback function, we use the selector $("#myDiv") to select the DIV that needs to be hidden or displayed, and use the toggle() method to switch its display state. This method will automatically modify the value of the CSS property "display" to show or hide the element.

If you need more fine-grained control, you can use the show() and hide() methods to show and hide elements respectively.

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

The above is how to use jQuery to hide and display controls. By modifying selectors and CSS properties, we can quickly control the display state of page elements, making the interaction more friendly and flexible.

The above is the detailed content of jquery implements hidden display of controls. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jquery sets value to formNext article：jquery sets value to form

See more

jquery implements hidden display of controls

Related articles