如何在导航栏的背景中切换

<ul class="navbar">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">关于我们</a></li>
</ul>

.navbar {
  background-color: #333;
  color: #fff;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

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

.navbar li a {
  color: #fff;
  text-decoration: none;
  padding: 5px;
}

.navbar li.active {
  background-color: #fff;
  color: #333;
}

var navbarItems = document.querySelectorAll('.navbar li');

navbarItems.forEach(function(item) {
  item.addEventListener('click', function() {
    // 移除所有导航项的active类
    navbarItems.forEach(function(item) {
      item.classList.remove('active');
    });
    // 给当前点击的导航项添加active类
    this.classList.add('active');
  });
});