曾经写显示隐藏老是用jq方法控制：

dom.show();

dom.hide();

事实上这样还是有非常多缺陷的。

这是html结构：

    <div class="holi">

        here are some test words

    </div>

    <div id="button">点击显示</div>

假设使用position:absolute和top－9999px控制点隐藏

        .holi{

            width: 200px;

            height: 200px;

            border: 1px solid red;

            position: absolute;

            visibility: hidden;

        }

这时候应该这样用jq让他显示比較好

        $(function(){

            $('#button').click(function(){

                $('.holi').css({

                    'position':'static',

                })

            })

        })

假设是position: absolute＋visibility: hidden;控制的 隐藏的话：

即

        .holi{

            width: 200px;

            height: 200px;

            border: 1px solid red;

            position: absolute;

            visibility: hidden;

        }

此时应该这样用jq控制显示：

        $(function(){

            $('#button').click(function(){

                $('.holi').css({

                    'position':'static',

                    'visibility':'visible'

                })

            })

        })

当然还有show hide直接调用这样的方法全然隐藏。

元素隐藏与显示是我们在页面制作与交互效果实现中非经常见的，假设您仅仅是使用display:none与display:block/inline来实现DOM元素的显隐控制。那你就out了。

假设希望隐藏内容能够被辅助阅读设备识别。就不能使用display:none以及visibility:hidden隐藏元素。

能够使用模拟隐藏的隐藏方法，又称可用性隐藏。absolute＋top：－9999px。 假设你是希望全然隐藏的，那就能够使用display:none或visibility:hidden。