jquery怎么实现点击一个按钮控制一个div的显示和隐藏
程序员文章站
2022-03-02 21:13:13
...
示例html:
<div class="abc" style="display:none"></div>
<input type="button" class="but" />
最简单的方法:
<script>
$(document).ready(function(e) {
$(".but").click(function(e) {
$(".abc").toggle();
});
});
</script>
toggle() 的作用就是当对象是显示的就隐藏,当是隐藏的则显示。
<—————–>
如果你除了显示和隐藏之外还需要同时实现其他功能的话,可以这样:
<script>
$(document).ready(function(e) {
$(".but").click(function(e) {
if( $(".abc").hasClass("show") ){
// 执行隐藏
$(".abc").hide().removeClass("show");
// 其他
}else{
// 显示
$(".abc").show().addClass("show");
}
});
});
</script>
这里通过自定义一个 class : show 来判断 div 是显示或隐藏
hasClass() 是否存在某个class
hide() 隐藏对象
show() 显示对象
removeClass() 移除一个class
addClass() 添加一个class
除此,还可以通过jquery设置这个 div 的 css : display:none/block 来实现隐藏/显示
下一篇: PHP网络资源弄视频,土办法
推荐阅读
-
使用jquery中实现按回车触发按钮事件和点击提交按钮触发的是一个事件
-
点击按钮显示一个div,div之外的地方隐藏,之内的地方不隐藏
-
jquery实现点击一个按钮显示当前div,并且关闭兄弟节点的所有div
-
怎么点击一个按钮显示当前的时间,用js 实现
-
两个单选按钮,点击其中一个隐藏或显示其他的div
-
两个单选按钮(一个是,一个否 ),一个div层,实现点击隐藏,显示div
-
基于JQuery做的一个简单的点击显示和隐藏的小Demo
-
利用html实现一个有点击(显示、隐藏)效果按钮的实例代码
-
利用html实现一个有点击(显示、隐藏)效果按钮的实例代码
-
【jquery】jquery怎么实现点击一个按钮控制一个div的显示和隐藏