[分享]css做两个页面切换

在网页的设计中，页面切换是一个很常见的需求。通过CSS可以实现简单的页面切换效果，本文将介绍如何使用CSS实现两个页面的切换效果。html,body{ height: 100; } .containe...

在网页的设计中，页面切换是一个很常见的需求。通过CSS可以实现简单的页面切换效果，本文将介绍如何使用CSS实现两个页面的切换效果。

html,body{
  height: 100%;
}
.container{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.page{
  height: 100%;
  display: none;
}
.page.active{
  display: block;
} 

首先，我们需要准备两个页面的HTML代码，然后在CSS中设置这些页面的高度为100%，以便占据整个屏幕。接着，我们为整个页面创建一个容器，并设置它的高度也为100%。这里使用Flexbox布局，使容器内的元素垂直居中。我们还需要为每个页面创建一个CSS类，将它们的display属性设置为none，以便将其隐藏。当页面需要出现时，我们可以通过给页面添加.active类来显示它。

<div class="container">
  <div class="page active">
    <p>第一个页面</p>
  </div>
  <div class="page">
    <p>第二个页面</p>
  </div>
</div> 

最后，我们需要使用JavaScript来切换页面。我们可以监听某个按钮的点击事件，并在处理程序函数中将当前活动页面的.active类移除，并将要切换的页面添加.active类，以显示新的页面。下面是完整的HTML和JavaScript代码示例：

<div class="container">
  <div class="page active">
    <p>第一个页面</p>
  </div>
  <div class="page">
    <p>第二个页面</p>
  </div>
</div>
<button onclick="switchPage()">切换页面</button>
<script>
  function switchPage(){
    const currentPage = document.querySelector('.page.active');
    const nextPage = (currentPage.nextElementSibling) ? currentPage.nextElementSibling : document.querySelector('.page:first-child');
    currentPage.classList.remove('active');
    nextPage.classList.add('active');
  }
</script> 

在这个示例中，我们使用了querySelector和nextElementSibling等方法来获取活动页面和要切换的页面。在JavaScript中，我们需要使用classList属性来添加或移除CSS类。

在实际开发中，我们可以根据不同的需求进行灵活的页面切换效果的设置。例如，我们可以使用CSS动画或过渡来为页面切换增添更多的视觉效果。