利用css页面隐藏和显示，实现页面滑动

本例子基于bootstraps的栅格

首先页面利用栅格分为十二等分（宽度），我们把六等份设为一部分，一共建立三个部分。

其中第一，二部分显示，第三部分隐藏。

加入button按钮，点击它使第三部分显示，第一部分隐藏。

代码如下

<script type="text/javascript">
    function shwoOrHidden(){
        if(document.getElementById("d1").style.display=='block'){
            document.getElementById("d1").style.display='none';
            document.getElementById("d2").style.display='block';
        }else if(document.getElementById("d1").style.display=='none'){
            document.getElementById("d1").style.display='block';
            document.getElementById("d2").style.display='none';
        }
    }
</script>

<button οnclick="shwoOrHidden()" >111111</button>
<div>
    <div class="col-md-6" style=" height: 600px;background-color:blue;display:block;"   id="d1"></div>
    <div class="col-md-6" style=" height: 600px;background-color: yellow;display:block;"   ></div>
    <div class="col-md-6" style=" height: 600px;background-color: red;display:none;"   id="d2"></div>

</div>

其中，可以不用栅格，自己定义div的宽度。