使用 JavaScript 实现动态侧边栏菜单

使用 JavaScript 实现动态侧边栏菜单

本示例将展示如何使用 JavaScript 代码实现动态侧边栏菜单，用户点击侧边栏菜单项时，对应的页面内容将显示出来。

HTML 结构

<div class='sidebar'>
  <ul>
    <li id='menu-item'>菜单项1</li>
    <li id='menu-item'>菜单项2</li>
    <li id='menu-item'>菜单项3</li>
  </ul>
  <div class='content'>
    <div id='content-item'>内容1</div>
    <div id='content-item'>内容2</div>
    <div id='content-item'>内容3</div>
  </div>
</div>

CSS 样式

.sidebar {
  width: 200px;
  height: 100%;
  background-color: #f1f1f1;
  float: left;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sidebar ul li {
  padding: 10px;
  cursor: pointer;
}

.sidebar ul li:hover {
  background-color: #ddd;
}

.content {
  margin-left: 20px;
  height: 100%;
}

.content div {
  display: none;
}

.active {
  display: block;
}

JavaScript 代码

var menuItems = document.querySelectorAll('.sidebar ul li');
var contentItems = document.querySelectorAll('.content div');

for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('click', function() {
    for (var j = 0; j < menuItems.length; j++) {
      menuItems[j].classList.remove('active');
      contentItems[j].classList.remove('active');
    }
    this.classList.add('active');
    contentItems[i].classList.add('active');
  });
}

代码说明：

1. 首先获取所有侧边栏菜单项和内容项的元素节点。
2. 使用 addEventListener 为每个菜单项添加点击事件监听器。
3. 点击事件处理函数中，首先移除所有菜单项和内容项的 active 类。
4. 然后为当前点击的菜单项添加 active 类，并为对应的内容项添加 active 类，使其显示出来。

总结

通过以上代码，我们可以实现一个简单的动态侧边栏菜单，用户点击菜单项时，对应的页面内容将显示出来。该示例代码可用于网站导航、内容切换等场景。