Home > Article > Web Front-end > How to use js to hide and show the button on click?

How to use js to hide and show the button on click?

藏色散人Original: 2018-08-06 14:55:4623406browse

This article mainly introduces how to use js to realize the hiding and display effects of clicking buttons, which is more convenient for user experience.

Note: jQuery is a fast and concise JavaScript framework. It is another excellent JavaScript code library (or JavaScript framework) after Prototype. The purpose of jQuery's design is "write less, do more", which means writing less code and doing more things. It encapsulates common JavaScript function codes, provides a simple JavaScript design pattern, and optimizes HTML document operations, event processing, animation design and Ajax interaction.

js implements the effect of hiding and displaying when clicking a button. The specific code examples are as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#hide").click(function(){
                $("p").hide();
            });
            $("#show").click(function(){
                $("p").show();
            });
        });
    </script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，就会消失，点击“显示”就会出现。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>

You can directly copy the above code for local demonstration. I hope this article introduction will be helpful to everyone.

How to use js to hide and show the button on click?

[Related article recommendations]

How to add a click event in js

js simulates a click event

jQuery triggers a click event by default when running the page for the first time

JQuery simulates a click event and automatically triggers the event

Detailed explanation of the conflict between hover and click events in jQuery (picture)

The above is the detailed content of How to use js to hide and show the button on click?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery ajax less html 封装 JS 事件 prototype

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：What is js array flattening? Implementation of js array flattening (with code)Next article：What is js array flattening? Implementation of js array flattening (with code)

See more

How to use js to hide and show the button on click?

Related articles