jquery implements hidden display of controls-Front-end Q&A-php.cn

jquery implements hidden display of controls

PHPz

Release： 2023-05-24 21:22:05

Original

700 people have browsed it

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>

Copy after login

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>

Copy after login

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();
    });
});

Copy after login

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();
    });
});

Copy after login

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!