CSS 相對/絕對(relative/absolute)定位與jQuery的控制顯示隱藏

標籤：效果   out   常見   print   params   one   識別   test   display   

曾經寫顯示隱藏老是用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。

CSS 相對/絕對(relative/absolute)定位與jQuery的控制顯示隱藏