您的位置：首页 > Web前端 > CSS

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

2017-10-31 16:58 351 查看

本例子基于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 onclick="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的宽度。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css javascript 实例 js html

相关文章推荐

新的分享

章节导航