简单实现js页面切换功能-前端开发

当我们需要在网站页面中实现切换效果，通常需要用到 JavaScript 来实现。下面是实现 js 页面切换功能的完整攻略：

当我们需要在网站页面中实现切换效果，通常需要用到 JavaScript 来实现。下面是实现 js 页面切换功能的完整攻略：

第一步：添加 HTML 结构

首先，在需要实现页面切换的 HTML 页面中，需要添加跳转链接以及对应的容器标签。例如，我们想要实现跳转到“首页”和“关于我们”两个页面，则可以添加如下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面切换示例</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于我们</a></li>
      </ul>
    </nav>
    <main>
      <div id="home">
        <h1>欢迎来到首页！</h1>
        <p>这里是我们的网站。</p>
      </div>
      <div id="about" style="display:none;">
        <h1>了解我们</h1>
        <p>我们是谁，我们在做什么。</p>
      </div>
    </main>
  </body>
</html>

在这个示例代码中，我们添加了一个 <nav> 标签，并在其中嵌套了一个 <ul> 和两个 <li> 标签。每个 <li> 标签包含一个 <a> 标签，用于执行页面跳转。我们还添加了一个 <main> 标签作为页面内容的容器，其中包含两个 <div> 标签，分别代表“首页”和“关于我们”两个页面。需要注意的是，我们将“关于我们”页面的 style 属性设置为 display:none;，以便在页面加载时隐藏该页面。

第二步：编写 JavaScript 代码

要实现页面切换功能，我们需要编写一些 JavaScript 代码来控制页面元素的显示和隐藏。具体来说，我们需要实现以下功能：

监听跳转链接的点击事件。
获取目标页面的 ID。
显示目标页面，隐藏其他页面。

下面是一个示例的 JavaScript 代码，实现了以上功能：

// 选择所有跳转链接
var links = document.querySelectorAll('nav ul li a');

// 遍历链接，为每个链接添加点击事件监听器
for (var i = 0; i < links.length; i++) {
  var link = links[i];
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止链接的默认行为
    var target = this.getAttribute('href'); // 获取目标页面 ID
    var pages = document.querySelectorAll('main > div'); // 选择所有页面
    // 遍历所有页面，隐藏非目标页面，显示目标页面
    for (var j = 0; j < pages.length; j++) {
      var page = pages[j];
      if (page.id == target.substr(1)) {
        page.style.display = "block";
      } else {
        page.style.display = "none";
      }
    }
  });
}

通过以上 JavaScript 代码，我们可以实现页面跳转和页面切换的效果。当用户点击跳转链接时，代码会获取目标页面的 ID，并通过遍历所有页面的方式，来隐藏非目标页面，显示目标页面。

示例说明

为了更好地理解实现 js 页面切换功能的过程，以下是两个简单的示例说明。

示例 1：切换图片画廊

在一个网站的画廊页面中，如果需要切换展示的图片，则可以使用实现 js 页面切换功能。具体来说，可以通过在网页上添加跳转链接，以及用 <img> 标签来展示图片的方式来实现。通过 JavaScript 代码的编写，可以实现实时切换展示的图片。例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>图片画廊</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#pic1">照片一</a></li>
        <li><a href="#pic2">照片二</a></li>
        <li><a href="#pic3">照片三</a></li>
      </ul>
    </nav>
    <main>
      <div id="pic1">
        <img src="pic1.jpg" alt="照片一">
      </div>
      <div id="pic2" style="display:none;">
        <img src="pic2.jpg" alt="照片二">
      </div>
      <div id="pic3" style="display:none;">
        <img src="pic3.jpg" alt="照片三">
      </div>
    </main>

    <script>
      // 选择所有跳转链接
      var links = document.querySelectorAll('nav ul li a');

      // 遍历链接，为每个链接添加点击事件监听器
      for (var i = 0; i < links.length; i++) {
        var link = links[i];
        link.addEventListener('click', function(e) {
          e.preventDefault(); // 阻止链接的默认行为
          var target = this.getAttribute('href'); // 获取目标页面 ID
          var pages = document.querySelectorAll('main > div'); // 选择所有页面
          // 遍历所有页面，隐藏非目标页面，显示目标页面
          for (var j = 0; j < pages.length; j++) {
            var page = pages[j];
            if (page.id == target.substr(1)) {
              page.style.display = "block";
            } else {
              page.style.display = "none";
            }
          }
        });
      }
    </script>
  </body>
</html>

通过上面的代码，我们为页面添加了三个展示图片的容器，以及三个跳转链接。当用户点击跳转链接时，JavaScript 代码会实现切换展示图片的效果。

示例 2：实现登录/注册页面切换

在一个网站的登录/注册页面中，如果需要快速切换登录和注册的表单，则可以使用实现 js 页面切换功能。具体来说，可以通过在网页上添加跳转链接，以及用 <form> 标签来展示登录或注册表单的方式来实现。通过 JavaScript 代码的编写，可以实现实时切换展示的表单。例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>登录/注册</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#login">登录</a></li>
        <li><a href="#register">注册</a></li>
      </ul>
    </nav>
    <main>
      <div id="login">
        <form>
          <h2>登录</h2>
          <label for="username">用户名：</label>
          <input type="text" id="username" name="username" required>
          <br>
          <label for="password">密码：</label>
          <input type="password" id="password" name="password" required>
          <br>
          <input type="submit" value="登录">
        </form>
      </div>
      <div id="register" style="display:none;">
        <form>
          <h2>注册</h2>
          <label for="username">用户名：</label>
          <input type="text" id="username" name="username" required>
          <br>
          <label for="password">密码：</label>
          <input type="password" id="password" name="password" required>
          <br>
          <label for="confirm">确认密码：</label>
          <input type="password" id="confirm" name="confirm" required>
          <br>
          <input type="submit" value="注册">
        </form>
      </div>
    </main>

    <script>
      // 选择所有跳转链接
      var links = document.querySelectorAll('nav ul li a');

      // 遍历链接，为每个链接添加点击事件监听器
      for (var i = 0; i < links.length; i++) {
        var link = links[i];
        link.addEventListener('click', function(e) {
          e.preventDefault(); // 阻止链接的默认行为
          var target = this.getAttribute('href'); // 获取目标页面 ID
          var pages = document.querySelectorAll('main > div'); // 选择所有页面
          // 遍历所有页面，隐藏非目标页面，显示目标页面
          for (var j = 0; j < pages.length; j++) {
            var page = pages[j];
            if (page.id == target.substr(1)) {
              page.style.display = "block";
            } else {
              page.style.display = "none";
            }
          }
        });
      }
    </script>
  </body>
</html>

通过上面的代码，我们为页面添加了登录和注册的表单容器，以及两个跳转链接。当用户点击跳转链接时，JavaScript 代码会实现切换登录/注册表单的效果。