jQuery动态显示和隐藏div

最新推荐文章于 2025-06-24 10:55:52 发布

原创最新推荐文章于 2025-06-24 10:55:52 发布 · 5.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#单击事件 #div动态显示隐藏

本文介绍了一种使用JavaScript实现点击不同按钮来切换显示与隐藏特定内容的方法。通过简单的HTML结构配合jQuery库，实现了两个按钮控制两段内容的显示与隐藏效果。

html内容

<div class="row form-group" id="user">
           你想展示的内容（）
 </div>
 <div class="row form-group" id="item">
           你想展示的内容
  </div>
 <div class="row form-group" id="userd">
           单击div时显示或隐藏的内容
 </div> 
 <div class="row form-group" id="itemd">
           单击div时显示或隐藏的内容
 </div>

js代码

默认显示的div
$(document).ready(function(){
    $("#userd").show();
    $("#itemd").hide(); 
    });
单击时显示的div
$("#user").bind("click", function(event) { $("#userd").show();$("#itemd").hide();});
$("#item").bind("click", function(event) {$("#userd").hide(); $("#itemd").show();});