纯 JavaScript 实现页面切换 - 简单易懂的示例

以下是一个简单的使用纯 JavaScript 实现的切换页面示例：

HTML 部分：

<div id='page1' class='page active'>
  <h1>Page 1</h1>
  <p>This is the first page.</p>
  <button onclick='changePage('page2')'>Go to Page 2</button>
</div>

<div id='page2' class='page'>
  <h1>Page 2</h1>
  <p>This is the second page.</p>
  <button onclick='changePage('page1')'>Go to Page 1</button>
</div>

CSS 部分：

.page {
  display: none;
}

.active {
  display: block;
}

JavaScript 部分：

function changePage(pageId) {
  // 隐藏所有页面
  var pages = document.getElementsByClassName('page');
  for (var i = 0; i < pages.length; i++) {
    pages[i].classList.remove('active');
  }
  
  // 显示指定页面
  var page = document.getElementById(pageId);
  page.classList.add('active');
}

在这个示例中，我们首先将所有页面都隐藏起来，然后根据用户的点击事件，显示出指定的页面。为了实现这个效果，我们使用了一个名为 'active' 的 CSS 类，它会将当前页面显示出来。我们还使用了 getElementById 和 getElementsByClassName 函数来获取页面元素。最后，我们将 changePage 函数绑定到按钮的 onclick 事件上，以响应用户的点击操作。