[事件处理] 点击同一按钮实现div的隐藏与显示切换

最新推荐文章于 2024-01-08 15:03:02 发布
最新推荐文章于 2024-01-08 15:03:02 发布
阅读量1w 收藏 4
点赞数
文章标签： html Jquery
点击同一按钮实现div的隐藏与现实切换:
在很多应用中，都有这样的功能，点击同一个按钮可以实现div的隐藏或者现实，当然操作的并非必须是按钮或者div，不过原理是一样的，下面就通过代码实例介绍一下如何实现此功能。
代码如下:
[HTML]  纯文本查看  复制代码 运行代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
< html >
< head >
< meta charset = " utf-8" >
< meta name = "author" content = "http://www.softwhy.com/" />
< title >蚂蚁部落</ title >
< style type = "text/css" >
#thediv{
   width:250px;
   height:50px;
   background-color:red;
}
</ style >
< script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js" ></ script >
< script type = "text/javascript" >
$(document).ready(function(){
   $("#bt").toggle(function(){
     $("#thediv").hide()
     $("#bt").val("点击显示");
   },function(){
     $("#thediv").show()
     $("#bt").val("点击隐藏");
   })  
});
</ script >
</ head >
< body >
< div id = "thediv" ></ div >
< input type = "button" id = "bt" value = "点击隐藏" />
</ body >
</ html >

以上代码可以实现我们想要的效果，这里主要利用了toggle()函数。
特别说明: toggle()函数已经在jQuery1.9中被删除。
相关阅读:
1.toggle()函数可以参阅 jQuery的toggle()方法 一章节。
2.hide()函数可以参阅 jQuery的hide()方法 一章节。
3.val()函数可以参阅 jQuery的val()方法 一章节。
4.show()函数可以参阅 jQuery的show()方法 一章节。 
kingmax54212008
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 控制元素案例点击按钮显示隐藏 div
猿码互联
05-18 416
这样，每次点击按钮时，就会切换内容元素的显示和隐藏状态。方法获取按钮和内容的元素，并将其分别保存在。方法为按钮绑定一个点击事件的监听器。在监听器函数中，通过检查内容元素的。样式属性，如果其值为。
vue点击按钮实现简单页面的切换
12-28
本文实例为大家分享了vue点击按钮实现页面切换的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title></title> [removed]...
点击按钮（a标签）隐藏显示div内容，切换div内容
08-11
超级实用的点击隐藏，显示div内容，切换div内容 点击按钮（a标签）
点击按钮控制div隐藏和显示
weixin_41595613的博客
11-23 4742
要求：有一个按钮，点击按钮使得div消失，之后将按钮文字改变为显示，再次点击按钮使得div出现，依次类推
HTML使用js点击隐藏控件属性方法实例
mkmmkkghhhhhhhh的博客
05-25 1983
点击隐藏部分控件
html、javascript四大隐藏事件解释
最新发布
tdx03的博客
01-08 1354
Javascript 是一种基于文本的编程语言，主要用于Web开发。它是WWW(万维网)的核心技术之一。通过使用 Javascript，程序员可以创建交互式和响应式Web元素并增强网站的UI。Javascript 在客户端Web开发中非常流行，以至于互联网上超过97%的网站都将其用于客户端行为。弹出窗口、图像滑块、站点导航菜单、选项卡、表单验证是用于Web开发的Javascript的一些示例。HTML是超文本标记语言的首字母缩写，它是用于创建网页和Web应用程序的标准标记语言。
html实现点击元素的出现与隐藏
majiayu000的博客
04-01 6331
html点击元素出现隐藏提示需要隐藏或提示的内容使用jquery完成点击元素出现提示点击元素以外提示隐藏完整的代码段 需要隐藏或提示的内容 今天想做一个网页，实现点击文本框出现文字提示，点击文本框以外的位置，即光标不在文本框的时候，提示消失。以下是想要点击的文本框内容，和提示文字 代码如下.： <input name="name" id='name' class="ui-input" pl...
Jquery中显示隐藏的实现代码分析
10-28
这意味着你可以通过单击一个按钮或其他事件触发器，反复切换同一元素的显示和隐藏状态。 4. 使用`$.css()`: `$.css()`方法允许我们直接修改元素的CSS属性。要显示元素，可以使用`$("#id").css('display', 'block')`...
vue 实现在同一界面实现组件的动态添加和删除功能
10-15
`@click`事件监听器用于删除某个组件实例，通过`questionList.splice(index, 1)`来实现。 6. **注意事项** - 确保在添加或删除组件时，`v-for`的`key`属性总是唯一的，以帮助 Vue 更高效地追踪和更新DOM。 - 由于...
Jquery实现图片大小切换带描述的幻灯片特效
03-16
首先，jQuery是一个轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画制作等任务。在我们的项目中，我们将利用jQuery的这些特性来实现幻灯片的动态效果。 1. **HTML 结构**：一个基本的幻灯片...
css实现的图片自动切换
11-10
图片切换就是基于这个原理，通过改变图片的`opacity`（透明度）或`display`（显示方式）等属性，实现图片的平滑过渡。 例如，创建一个简单的图片轮播动画，首先需要准备多张图片，并将它们设置为同一div的背景图： ...
javascript点击按钮实现隐藏显示切换效果
10-22
主要介绍了javascript点击按钮实现隐藏显示切换效果，以一个完整的实例为大家分析了js点击按钮实现隐藏显示切换的功能，感兴趣的小伙伴们可以参考一下
onclick事件实现div的隐藏和显示
03-01
博文链接：https://qsfwy.iteye.com/blog/219184
HTML通过按钮来显示、隐藏内容
qq_59825852的博客
08-23 3169
【代码】HTML通过按钮来显示、隐藏内容。
如何使用 JavaScript 显示/隐藏或切换 DIV 元素
allway2的博客
05-27 2949
在 jQuery 中，您可以使用 .toggle() 方法来切换元素，任何元素。但是，如果您正在寻找纯 JavaScript 解决方案，那么这里就是。我在这里分享一个简单的代码，它展示了使用 JavaScript 切换或显示/隐藏 DIV 元素是多么容易。 相关：使用 jQuery 基于下拉选择切换 DIV 元素 <div> 元素通常用作容器，它还会包含许多其他元素，例如 form。您可能希望在满足某些条件时显示或隐藏 <div> 元素。 这是一个常见的场景。我希望在按钮.
JavaScript点击一个按钮隐藏和显示div
热门推荐
Return_KB的博客
01-09 3万+
本章节通过代码实例介绍一下如何实现点击同一按钮实现一个元素的显示和隐藏效果。 此效果还是比较实用的，比如点击按钮可以实现一个功能模块的显示或者隐藏。 下面就通过代码实例介绍一下如何实现此功能。 代码实例如下: 01020304050607080910111213141516171819202122232425262728293031323334html>head>meta ch
在echarts中用el-radio-button按钮实现同一张图切换不同使用fetch后端传来的数据
05-29
要实现在echarts中用el-radio-button按钮切换不同的数据，可以先在vue中定义一个变量来存储当前选中的数据源，例如： ``` <template> <div> <el-radio-group v-model="selectedSource"> <el-radio-button :label="source1">数据源1</el-radio-button> <el-radio-button :label="source2">数据源2</el-radio-button> <el-radio-button :label="source3">数据源3</el-radio-button> </el-radio-group> <div id="chart"></div> </div> </template> <script> export default { data() { return { selectedSource: 'source1', // 默认选中数据源1 source1: [], // 数据源1 source2: [], // 数据源2 source3: [], // 数据源3 } }, methods: { fetchData() { // 使用fetch获取数据，并将返回的数据赋值给对应的数据源 fetch('/api/data1').then(response => response.json()).then(data => this.source1 = data) fetch('/api/data2').then(response => response.json()).then(data => this.source2 = data) fetch('/api/data3').then(response => response.json()).then(data => this.source3 = data) }, renderChart() { // 根据当前选中的数据源渲染图表 const data = this[this.selectedSource] // 使用echarts绘制图表 const chart = echarts.init(document.getElementById('chart')) chart.setOption({ // 配置图表选项 series: [ { type: 'bar', data, }, ], }) }, }, mounted() { this.fetchData() // 获取数据 this.renderChart() // 渲染图表 }, watch: { selectedSource() { this.renderChart() // 监听选中的数据源变化，重新渲染图表 }, }, } </script> ``` 在上面的代码中，我们定义了一个selectedSource变量来存储当前选中的数据源，然后在模板中使用el-radio-button按钮来选择不同的数据源。在mounted钩子函数中，我们调用fetchData方法来获取数据，在renderChart方法中根据当前选中的数据源渲染图表。同时，我们使用watch监听selectedSource变量的变化，一旦变化就重新渲染图表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值