导航栏点击时样式停留

导航栏点击时样式停留，通常是指在用户单击导航菜单项时，该菜单项会保持选中状态，同时显示一种视觉突出的效果，以便用户能立即识别当前他们所在的位置。这种效果常见于响应式设计的网站和应用中，可以提升用户体验和交互感知。

为了实现这个功能，开发者可能会利用CSS伪类，如`:active` 或者JavaScript/jQuery等库来监听点击事件。当鼠标按下并释放时，相应的CSS规则会被应用到被点击的导航元素上，直到下一次点击或其他操作改变。例如：

.nav-item:active {
  background-color: #ccc; /* 高亮颜色 */
  color: white; /* 文本颜色变化 */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* 可选的阴影效果 */
}

JavaScript示例：

$('.nav-item').on('click', function() {
  $(this).addClass('active');
});
$(document).mouseup(function(e) {
  var container = $('.nav-container');
  if (!container.is(e.target) && container.has(e.target).length === 0) {
    $('.nav-item.active').removeClass('active');
  }
});