js实现导航栏

2026-01-30 10:16:58JavaScript

实现导航栏的基本结构

使用HTML创建导航栏的基本框架，通常包含<nav>标签和列表项<ul>、<li>。

<nav id="navbar">
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

添加CSS样式

通过CSS设置导航栏的布局和外观，例如水平排列、背景色和悬停效果。

js实现导航栏

#navbar {
  background-color: #333;
  overflow: hidden;
}

#navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

#navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navbar li a:hover {
  background-color: #111;
}

使用JavaScript实现交互功能

通过JavaScript动态修改导航栏行为，例如高亮当前页面或添加响应式菜单。

js实现导航栏

高亮当前页面链接

document.querySelectorAll('#navbar li a').forEach(link => {
  if (link.href === window.location.href) {
    link.classList.add('active');
  }
});

响应式折叠菜单

添加一个按钮，在小屏幕下折叠导航栏。

<button id="menu-toggle">菜单</button>

const toggleButton = document.getElementById('menu-toggle');
const navbar = document.getElementById('navbar');

toggleButton.addEventListener('click', () => {
  navbar.classList.toggle('active');
});

完整代码示例

结合HTML、CSS和JavaScript实现完整导航栏。

<!DOCTYPE html>
<html>
<head>
  <style>
    #navbar {
      background-color: #333;
      overflow: hidden;
    }
    #navbar ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
    }
    #navbar li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    #navbar li a:hover {
      background-color: #111;
    }
    #menu-toggle {
      display: none;
    }
    @media (max-width: 600px) {
      #navbar ul {
        flex-direction: column;
        display: none;
      }
      #navbar.active ul {
        display: flex;
      }
      #menu-toggle {
        display: block;
      }
    }
  </style>
</head>
<body>
  <button id="menu-toggle">菜单</button>
  <nav id="navbar">
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#services">服务</a></li>
      <li><a href="#contact">联系</a></li>
    </ul>
  </nav>
  <script>
    document.querySelectorAll('#navbar li a').forEach(link => {
      if (link.href === window.location.href) {
        link.classList.add('active');
      }
    });

    const toggleButton = document.getElementById('menu-toggle');
    const navbar = document.getElementById('navbar');
    toggleButton.addEventListener('click', () => {
      navbar.classList.toggle('active');
    });
  </script>
</body>
</html>

标签: js