jquery实现动态导航栏

可以使用 jQuery 来实现动态导航栏。下面是一个简单的示例：

HTML 代码：

<nav>
  <ul class="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>

CSS 代码：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  display: block;
  padding: 10px;
  background-color: #eee;
  color: #333;
  text-decoration: none;
}

nav a.active {
  background-color: #333;
  color: #fff;
}

jQuery 代码：

$(document).ready(function() {
  // 为每个菜单项添加单击事件处理程序
  $('.menu li').click(function() {
    // 删除所有菜单项的类“active”
    $('.menu li').removeClass('active');
    // 将单击的菜单项添加类“active”
    $(this).addClass('active');
  });
});

上述代码会为导航栏中的每个菜单项添加单击事件处理程序。当单击一个菜单项时，它会删除所有菜单项的类“active”，并将单击的菜单项添加类“active”。通过 CSS，我们可以使用类“active”来突出显示当前选定的菜单项。