cari

Rumah  >  Artikel  >  hujung hadapan web  >  js如何实现点击按钮出现隐藏和显示效果？

js如何实现点击按钮出现隐藏和显示效果？

藏色散人
藏色散人asal
2018-08-06 14:55:4623428semak imbas

本篇文章主要介绍如何用js实现点击按钮出现隐藏和显示的效，更便于用户体验。

注：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

js实现点击按钮出现隐藏和显示的效果具体代码示例如下：

<!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>

大家可以直接复制以上代码在本地演示。希望本篇文章介绍对大家有所帮助。

02ceb45c87419a427c7694ff040ccde.png

【相关文章推荐】

js如何添加点击事件

js模拟点击事件 

jQuery第一次运行页面默认触发点击事件

JQuery 模拟点击事件，自动触发事件

jQuery中关于hover和点击事件之间的冲突详解（图）

Atas ialah kandungan terperinci js如何实现点击按钮出现隐藏和显示效果？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery ajax less html 封装 JS 事件 prototype
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：什么是js数组扁平化？js数组扁平化的实现（附代码）Artikel seterusnya：js怎么实现倒计时的功能？（精准到毫秒）

Artikel berkaitan

Lihat lagi