非话动tab的单页面

其实就是两个属性的切换.

<ul class="bg_red" id="single">
    <li>111</li>
    <li>333</li>
    <li>555</li>
    <li>777</li>
    <li>999</li>
</ul>
<ul class="bg_yellow display-none" id="double">
    <li>2</li>
    <li>4</li>
    <li>6</li>
    <li>8</li>
    <li>10</li>
</ul>


<button id="show">点击显示</button>
<button id="hidden">点击隐藏</button>

<script>
    $(document).ready(function () {
        $("#show").click(function () {
            $("#double").show();
            $("#single").hide();
        });
        $("#hidden").click(function () {
            $("#double").hide();
            $("#single").show();
        });
    });
</script>

display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

简单的讲  

第一种是移除不占位

第二种是移除占位