📅 最后修改于: 2023-12-03 15:09:51.609000 🧑 作者: Mango
在 Web 开发中，显示和隐藏元素是一种常见的交互效果。JavaScript 提供了一种简单的方式，让我们能够按照用户的动作来显示或隐藏页面上的元素。下面是两种常见的方式：
我们可以使用 CSS 的 display 属性来显示或隐藏元素。当我们想要隐藏一个元素时，我们可以将它的 display 属性设置为 "none"，当我们想要显示它时，我们可以设置它的 display 属性为 "block"、"inline" 或 "inline-block"，根据元素的原始 display 值而定。下面是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
display: none;
}
</style>
</head>
<body>
<input type="text" id="myInput" onkeyup="showDiv()" />
<div id="myDiv">
Hello, World!
</div>
<script>
function showDiv() {
var input = document.getElementById("myInput");
var div = document.getElementById("myDiv");
if (input.value !== "") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
</script>
</body>
</html>
在这个示例中，我们首先使用 CSS 将一个 div 元素隐藏起来，然后我们使用 JavaScript 在输入框中输入内容时，判断输入框是否为空，如果不为空，则将 div 元素显示出来。
jQuery 是一个流行的 JavaScript 库，它提供了一系列的方法，用于简化常见的 JavaScript 操作。其中，show() 和 hide() 方法可以用来显示或隐藏一个元素。和使用 CSS 一样，当我们想要隐藏一个元素时，我们可以调用 hide() 方法，当我们想要显示一个元素时，我们可以调用 show() 方法。下面是一个使用 jQuery 的示例：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<input type="text" id="myInput" onkeyup="showDiv()" />
<div id="myDiv" style="display: none;">
Hello, World!
</div>
<script>
function showDiv() {
var input = $("#myInput");
var div = $("#myDiv");
if (input.val() !== "") {
div.show();
} else {
div.hide();
}
}
</script>
</body>
</html>
在这个示例中，我们首先在页面中引入了 jQuery 库，然后使用 $() 函数，分别获取了输入框和 div 元素。接着，在输入框的 onkeyup 事件中，我们判断输入框是否为空，如果不为空，则使用 show() 方法显示 div 元素，否则使用 hide() 方法将其隐藏起来。
无论是使用纯 JavaScript 还是使用 jQuery，都可以实现页面元素的显示和隐藏效果。在实际开发中，我们应该根据需求和个人习惯来选择适合自己的方式。