js 页面多个切换

在 JavaScript 中实现页面多个切换的效果，通常可以通过以下几种方式：

基础概念：这是通过操作 DOM 元素的显示和隐藏来达到页面内容切换的目的。

优势：

提升用户体验，使页面更加动态和交互性强。
减少页面的加载时间，因为不需要重新加载整个页面。

类型：

基于按钮点击切换。
基于菜单选择切换。
基于轮播图切换等。

应用场景：比如网页的多页面导航、选项卡切换内容、轮播图展示等。

示例代码（基于按钮点击切换）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面切换示例</title>
  <style>
    .content {
      display: none;
    }

    .active {
      display: block;
    }
  </style>
</head>

<body>
  <button onclick="showContent('content1')">内容 1</button>
  <button onclick="showContent('content2')">内容 2</button>
  <button onclick="showContent('content3')">内容 3</button>

  <div id="content1" class="content active">这是内容 1</div>
  <div id="content2" class="content">这是内容 2</div>
  <div id="content3" class="content">这是内容 3</div>

  <script>
    function showContent(id) {
      var contents = document.getElementsByClassName('content');
      for (var i = 0; i < contents.length; i++) {
        contents[i].classList.remove('active');
      }
      document.getElementById(id).classList.add('active');
    }
  </script>
</body>

</html>

可能出现的问题及原因：