网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 生活知识 知识问答

jQuery怎么实现隐藏和显示效果

时间:2024-11-13 01:01:18

1、第一步在我们的电脑上面打开软件,新建一个html和引入jquery.js,如下图所示:

jQuery怎么实现隐藏和显示效果

2、第二步我们在新建的html页面body里面添加一个id为hide的隐藏按钮和id为show的显示按钮以及一段文字,如下图所示:

jQuery怎么实现隐藏和显示效果

3、第三步我们编写的js文件,首先引入jquery.js,通过$("#xx").click(function(){}代码给两个按钮添加点击事件,$("p").hide();隐藏段落文字,$("p").show();显示段落文字,如下图所示:

jQuery怎么实现隐藏和显示效果

4、第四步我们编写好js和body页面内容之后,完整代码如下图所示:

jQuery怎么实现隐藏和显示效果

5、第五步我们在浏览器中打开html页面,可以看到一段描述文字,和隐藏,显示按钮,如下图所示:

jQuery怎么实现隐藏和显示效果

6、第六步点击隐藏按钮,段落文字会被隐藏掉,再点击显示按钮,隐藏的段落文字会显示出来,如下图所示:

jQuery怎么实现隐藏和显示效果
© 2026 五度知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com