如何将breadcrumb设置为活动状态或在单击时将其突出显示？

<ul class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">分类</a></li>
  <li><a href="#">子分类</a></li>
  <li class="active">当前页面</li>
</ul>

.breadcrumb li {
  display: inline;
}

.breadcrumb li:not(:last-child):after {
  content: "/";
  margin: 0 5px;
}

.breadcrumb li.active {
  font-weight: bold;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

var breadcrumbItems = document.querySelectorAll(".breadcrumb li");

for (var i = 0; i < breadcrumbItems.length; i++) {
  breadcrumbItems[i].addEventListener("click", function() {
    // 移除所有面包屑项的活动状态
    for (var j = 0; j < breadcrumbItems.length; j++) {
      breadcrumbItems[j].classList.remove("active");
    }
    
    // 将当前点击的面包屑项设置为活动状态
    this.classList.add("active");
  });
}