笔记大全

jquery和js显示和隐藏div的方法有哪些

更新时间：2023-10-20

jQuery 显示div

jQuery 显示 div 有多种方式，其中比较流行的是使用 show() 和 fadeIn() 方法。

$(document).ready(function(){
  $("#showdiv").click(function(){
    $("#mydiv").show();
  });
});

以上代码会在页面加载后，将 id="showdiv" 的元素绑定一个点击事件。当该元素被点击时，id="mydiv" 的元素将会显示出来。


这是要显示的div

另一个流行的方法是使用 fadeIn()，它会使元素淡入显示。用法与 show() 方法类似：

$(document).ready(function(){
  $("#showdiv").click(function(){
    $("#mydiv").fadeIn();
  });
});

与 show() 相比，fadeIn() 方法可以使元素更流畅更自然地显示出来。

jQuery 隐藏div

隐藏 div 最常用的方法是使用 hide() 方法：

$(document).ready(function(){
  $("#hidediv").click(function(){
    $("#mydiv").hide();
  });
});

以上代码会在页面加载后，将 id="hidediv" 的元素绑定一个点击事件。当该元素被点击时，id="mydiv" 的元素将会隐藏起来。


这是要隐藏的div

除了 hide() 方法外，还有 fadeOut() 方法，它会使元素淡出隐藏：

$(document).ready(function(){
  $("#hidediv").click(function(){
    $("#mydiv").fadeOut();
  });
});

用法与 hide() 相似，区别在于 fadeOut() 会使得元素流畅地淡出隐藏。

JavaScript 显示div

使用原生 JavaScript 显示 div 需要获取 DOM 元素并修改 style 属性：

document.getElementById("showdiv").onclick = function() {
  document.getElementById("mydiv").style.display = "block";
};

以上代码会在页面加载后，将 id="showdiv" 的元素绑定一个点击事件。当该元素被点击时，id="mydiv" 的元素将会显示出来。


这是要显示的div

JavaScript 隐藏div

隐藏 div 也需要获取 DOM 元素并修改 style 属性，设置为 display:none 即可：

document.getElementById("hidediv").onclick = function() {
  document.getElementById("mydiv").style.display = "none";
};