开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用javascript关闭bootstrap div

要使用JavaScript关闭Bootstrap的div，你可以使用jQuery库来简化DOM操作。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Close Bootstrap Div</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div id="myDiv" class="alert alert-success" role="alert">
            This is a Bootstrap div.
        </div>
        <button id="closeBtn" class="btn btn-danger">Close Div</button>
    </div>

    <script>
        $(document).ready(function() {
            $('#closeBtn').click(function() {
                $('#myDiv').alert('close');
            });
        });
    </script>
</body>
</html>

解释

HTML部分:
- 引入了Bootstrap的CSS和JS文件，以及jQuery库。
- 创建了一个带有alert alert-success类的div，和一个按钮用于关闭这个div。

JavaScript部分:
- 使用jQuery的$(document).ready()方法确保DOM完全加载后再执行脚本。
- 给按钮添加点击事件，当按钮被点击时，调用Bootstrap的alert('close')方法关闭指定的div。

参考链接

通过这种方式，你可以轻松地使用JavaScript关闭Bootstrap的div。

相关搜索:Javascript-单击关闭按钮时如何显示div？JavaScript:如何使用HREF移动DIV？使用bootstrap垂直居中div 使用Bootstrap按钮复制div 使用javascript关闭Lightbox 使用vanilla javascript的bootstrap 5关闭模式如何使用bootstrap 3更改div顺序？如何使用bootstrap将div对齐到右？如何使用bootstrap将div放在图像上如何使用javascript操作空div？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

没有搜到相关的合辑

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭