点击同一按钮实现div的隐藏与现实切换:admin管理员组文章数量:1573690
在很多应用中,都有这样的功能,点击同一个按钮可以实现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/"
/>
<
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()方法 一章节。
版权声明:本文标题:[事件处理] 点击同一按钮实现div的隐藏与显示切换 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1727747519a1127983.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论