js实现点击菜单栏切换

<ul id="menu">
  <li class="menu-item active" data-target="home">Home</li>
  <li class="menu-item" data-target="about">About</li>
  <li class="menu-item" data-target="contact">Contact</li>
</ul>

<div id="content">
  <div class="page active" id="home">Home Page</div>
  <div class="page" id="about">About Page</div>
  <div class="page" id="contact">Contact Page</div>
</div>

document.addEventListener('DOMContentLoaded', function() {
  const menuItems = document.querySelectorAll('.menu-item');
  const pages = document.querySelectorAll('.page');

  menuItems.forEach(item => {
    item.addEventListener('click', function() {
      // Remove active class from all menu items and pages
      menuItems.forEach(menuItem => menuItem.classList.remove('active'));
      pages.forEach(page => page.classList.remove('active'));

      // Add active class to the clicked menu item and corresponding page
      const target = this.getAttribute('data-target');
      this.classList.add('active');
      document.getElementById(target).classList.add('active');
    });
  });
});

.menu-item.active {
  background-color: #ddd;
}

.page {
  display: none;
}

.page.active {
  display: block;
}