利用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()" >111111button>
<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的宽度。 利用css页面隐藏和显示,实现页面滑动_第1张图片 利用css页面隐藏和显示,实现页面滑动_第2张图片

你可能感兴趣的:(css,js)