导航栏并不适用于所有部分(html、css、js)

<!-- 示例代码：响应式导航栏 -->
<nav class="navbar">
  <div class="navbar-brand">MyWebsite</div>
  <div class="navbar-toggle" id="mobile-menu">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div>
  <ul class="navbar-menu">
    <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.getElementById('mobile-menu').addEventListener('click', function() {
    const menu = document.querySelector('.navbar-menu');
    menu.classList.toggle('active');
  });
</script>

<style>
  .navbar-menu {
    display: flex;
    justify-content: space-around;
  }
  .navbar-menu.active {
    display: block;
  }
  @media (max-width: 768px) {
    .navbar-menu {
      display: none;
    }
  }
</style>

// 示例代码：使用React Router管理导航
import { BrowserRouter as Router, Route, Link, useLocation } from 'react-router-dom';

function Navbar() {
  const location = useLocation();
  return (
    <nav>
      <Link to="/" className={location.pathname === '/' ? 'active' : ''}>Home</Link>
      <Link to="/about" className={location.pathname === '/about' ? 'active' : ''}>About</Link>
      <Link to="/services" className={location.pathname === '/services' ? 'active' : ''}>Services</Link>
    </nav>
  );
}

function App() {
  return (
    <Router>
      <Navbar />
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/services" component={Services} />
    </Router>
  );
}