css导航栏选中背景颜色改变

CSS导航栏选中背景颜色改变是网页设计中常用的技巧之一。通过改变导航栏中选中的选项的背景颜色，能够提高用户交互性和视觉效果。下面我们来看一些实现这个效果的方法。

.navbar{
  background-color: #f8f8f8;
  /* 其他样式 */
}

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

.navbar li a{
  color: #333;
  text-decoration: none;
}

/* 当前选中项的样式 */
.navbar li.current a{
  background-color: #f44336;
  color: #fff;
}

以上是一个基本的导航栏样式，其中通过给选中元素的a标签添加背景颜色和修改文字颜色等样式来达到改变选中元素背景颜色的效果。

另一种实现方式是通过JavaScript来动态修改选中元素的样式，以下是一个例子：

$(function(){
  var $navLinks = $('.navbar a');
  $navLinks.click(function(){
    $navLinks.removeClass('active');
    $(this).addClass('active');
  });
});

通过添加和移除active类来实现选中背景颜色的改变，上面的代码使用了jQuery库来简化操作。当然，也可以使用其他JavaScript库或者纯JavaScript实现这种效果。