「仿站教程」简单导航菜单教程

来源: 海外服务器
导读 当您在网页开发中需要创建一个简单的导航菜单,点击菜单项时显示相应的子菜单时,可以使用以下HTML和JavaScript的简单教程。在这个例子中,我们创建了一个包含三个主菜单的简单网页,每个主菜单下有三个子菜单。点击主菜单时,相应的子菜单将显...


当您在网页开发中需要创建一个简单的导航菜单,点击菜单项时显示相应的子菜单时,可以使用以下HTML和JavaScript的简单教程。在这个例子中,我们创建了一个包含三个主菜单的简单网页,每个主菜单下有三个子菜单。点击主菜单时,相应的子菜单将显示,点击其他主菜单时,先前显示的子菜单将隐藏。

创建HTML结构

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单导航菜单</title>
  <style>
    /* 添加一些样式,使菜单看起来更好 */
    .nav-list {
      list-style-type: none;
      cursor: pointer;
    }

    .nav-list li {
      display: none;
    }
  </style>
</head>
<body>
  <div id="MyNav1">
    <ul>
      主菜单 A
      <li>
        <a href="#">A1</a>
        <a href="#">A2</a>
        <a href="#">A3</a>
      </li>
    </ul>
    <ul>
      主菜单 B
      <li>
        <a href="#">B1</a>
        <a href="#">B2</a>
        <a href="#">B3</a>
      </li>
    </ul>
    <ul>
      主菜单 C
      <li>
        <a href="#">C1</a>
        <a href="#">C2</a>
        <a href="#">C3</a>
      </li>
    </ul>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      var navItems = document.querySelectorAll('.nav-list');

      navItems.forEach(function (navItem) {
        navItem.addEventListener('click', function () {
          // 隐藏所有 li 元素
          navItems.forEach(function (item) {
            item.querySelector('li').style.display = 'none';
          });

          // 显示相应的 li 元素
          this.querySelector('li').style.display = 'block';
        });
      });
    });
  </script>
</body>
</html>

解释

  1. 我们使用了HTML和CSS创建了一个包含三个主菜单的基本网页结构,每个主菜单下都有一个包含三个子菜单的列表。

  2. 我们使用了JavaScript来监听主菜单的点击事件。当主菜单被点击时,它会隐藏所有其他子菜单,并显示相应主菜单的子菜单。

这只是一个简单的例子,您可以根据自己的需要进行修改和扩展。希望这个简短的教程对您有帮助!