jquery怎么让div隐藏显示出来

在网页开发中，我们经常需要控制HTML元素的显示和隐藏，jQuery是一个流行的JavaScript库，它提供了一种简洁的方式来操作DOM元素，包括显示和隐藏元素，在本教程中，我们将学习如何使用jQuery来控制div元素的显示和隐藏。

（图片来源网络，侵删）

1、引入jQuery库

我们需要在HTML文件中引入jQuery库，你可以通过以下方式之一来引入：

方法一：使用<script>标签直接引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>jQuery Hide and Show</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
    <!页面内容 >
</body>
</html>

方法二：通过CDN引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>jQuery Hide and Show</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <!页面内容 >
</body>
</html>

2、编写HTML结构

接下来，我们需要编写一个简单的HTML结构，包含一个div元素，以及一些按钮用于控制div的显示和隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>jQuery Hide and Show</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
    <button id="showBtn">显示</button>
    <button id="hideBtn">隐藏</button>
    <div id="myDiv" style="backgroundcolor: lightblue; width: 200px; height: 200px; display: none;">我是一个div元素</div>
    <script>
        // 在这里编写jQuery代码
    </script>
</body>
</html>

3、编写jQuery代码

现在我们可以编写jQuery代码来控制div的显示和隐藏，我们需要为“显示”和“隐藏”按钮添加点击事件监听器，在事件处理函数中，我们可以使用jQuery的toggle()方法来切换div的显示和隐藏状态，我们需要将jQuery代码放入<script>标签中。

$(document).ready(function() {
    $("#showBtn").click(function() {
        $("#myDiv").toggle();
    });
    $("#hideBtn").click(function() {
        $("#myDiv").hide();
    });
});

4、测试效果

保存HTML文件，然后在浏览器中打开它，点击“显示”按钮，你应该可以看到蓝色的div元素，再次点击“显示”按钮，div元素应该消失，点击“隐藏”按钮，div元素应该重新出现，这表明我们已经成功地使用jQuery控制了div元素的显示和隐藏。

在本教程中，我们学习了如何使用jQuery来控制div元素的显示和隐藏，我们首先引入了jQuery库，然后编写了一个简单的HTML结构，包含一个div元素和两个按钮，接着，我们编写了jQuery代码，为按钮添加了点击事件监听器，并使用toggle()方法来切换div的显示和隐藏状态，我们测试了效果，确保一切正常，希望本教程对你有所帮助！

原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/370945.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。