div动态消失与显示

最新推荐文章于 2021-06-03 08:41:33 发布

羊掌门

最新推荐文章于 2021-06-03 08:41:33 发布

阅读量7.3k

点赞数

分类专栏：前端文章标签： bootstrap jquery div隐藏 switch

本文链接：https://blog.csdn.net/q56231293811/article/details/57082703

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言简述

html页面div动态消失，并且不占用窗体位置，用jquery就可以实现，具体的实现方法是

$(“#div_id”).hide();

div_id 是div标签的id号，如果想让这个标签重新显示，可以使用

$(“#div_id”).show();

具体案例(顺带介绍Bootstrap Switch及其用法)

案例使用了Bootstrap，Bootstrap Switch，其中Boostrap的下载地址为
https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
Bootstrap Switch的地址是：
http://www.bootcss.com/p/bootstrap-switch/
此外还需要jquery，jquery的下载地址为:
https://code.jquery.com/jquery-3.1.1.min.js
这个案例是，有一个开关，用来打开一个div1的显示与关闭，页面布局设计如下：

具体代码如下所示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态控制div显示</title>
    <link href="./css/bootstrap.css" rel="stylesheet">
    <link href="./css/bootstrapSwitch.css" rel="stylesheet">
    <!--div_1 div_2 background color set-->
    <style>
        #div_1{
            background-color:#CD661D;
            height:100px
        }
        #div_2{
            background-color:#8DB6CD;
            height:100px
        }
    </style>
</head>
<body>
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script src="./js/bootstrapSwitch.js"></script>
    <div class="container">
        <div id="switch_1" class="switch" data-on="primary" data-off="info">
            <input type="checkbox" checked />
        </div>
    </div>

    <div id="div_1" class="container">

    </div>

    <div id="div_2" class="container">

    </div>
    <!--触动开关的按钮-->
    <script>
        $('#switch_1').on('switch-change', function (e, data) {
            var $el = $(data.el),value = data.value;
            if(value)
            {
                $("#div_1").show();
            }
            else
            {
                $("#div_1").hide();
            }
        });
    </script>

</body>
</html>

结果展示

下面的JavaScript代码，中的data.value的值是为true或者false。当开关从OFF转换至ON状态时这个值为true反之为false。

当开关状态为ON时，将会显示div_1，当开关状态为OFF时，将会隐藏div_1。当div_1中还有其他标签时，其对象也是不可见的，但是可以通过JavaScript代码访问的到。
效果图1，显示div_1

效果图2，关闭div_1

羊掌门

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
div动态消失与显示

前言简述html页面div动态消失，并且不占用窗体位置，用jquery就可以实现，具体的实现方法是$(“#div_id”).hide();div_id 是div标签的id号，如果想让这个标签重新显示，可以使用$(“#div_id”).show();具体案例(顺带介绍Bootstrap Switch及其用法) 案例使用了Bootstrap，Bootstrap Switch，其中Boostrap的下
复制链接

扫一扫