如何为导航栏添加活动类？

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

$(document).ready(function() {
  $('.nav li').removeClass('active'); // 移除所有列表项的活动类
  var currentUrl = window.location.href; // 获取当前页面的URL
  $('.nav li a').each(function() {
    if ($(this).attr('href') === currentUrl) {
      $(this).parent().addClass('active'); // 添加活动类到当前页面的列表项
    }
  });
});

.nav li.active {
  background-color: #ff0000;
  color: #ffffff;
}