Javascript 在vanilla JS中切换高光

我需要实现一个功能，在我的网站上有特定的类别，并且需要始终突出显示用户单击的类别。 还要求每次只能有一个突出显示的项目。 现在，我可以用下面的代码来实现这一点，但我也想让它工作起来，这样当我点击突出显示的项目时，它会从中删除突出显示。我知道为什么这段代码不是这样工作的：首先，它总是删除每个突出显示，所以当我单击（此函数附加到事件侦听器）时，我的“active li”类从未在该类上处于活动状态。 但不管我怎么想，我就是无法集中精力解决这个问题。如何更改此代码，使其能够从高亮显示的元素中删除高亮显示，但同时确保只能高亮显示一个项目

function highlightClas(activeClass) {
for (let category of categories.children) {
    category.classList.remove('active-li');
}
if (activeClass.classList.contains('active-li')) {
    activeClass.classList.remove('active-li');
} else {
    activeClass.classList.add('active-li');
}

}

相关HTML：

                <div class="filters">
                    <h3>CATEGORIES</h3>
                    <ul>
                    </ul>
                </div>

}

以及相关的JS：

var categories = document.querySelector('.filters ul');
async function populateCategories() {
    const categoriesUrl = '/api/products/categories';
    const response = await fetch(categoriesUrl);
    const categoriesResp = await response.json();

    for (let category of categoriesResp) {
        let template = `<a>${category}</a>`;
        let appendedCategory = document.createElement('li');
        appendedCategory.innerHTML = template;
        categories.append(appendedCategory);
        appendedCategory.addEventListener('click', () => {
            highlightClas(appendedCategory);
        });
    }
}

var categories=document.querySelector（'.filters-ul'）；
异步函数populateCategories（）{
const categoriesUrl='/api/products/categories'；
const response=等待获取（categoriesUrl）；
const categoriesResp=await response.json（）；
for（让类别的类别为ESP）{
让template=`${category}`；
让appendedCategory=document.createElement（'li'）；
appendedCategory.innerHTML=模板；
类别。追加（追加类别）；
AddedCategory.addEventListener（'单击'，（）=>{
highlightClas（附加类别）；
});
}
}

您需要展示一个完整的示例。html和css（如果有的话）在哪里？类别定义在哪里？我编辑了这个问题。不是很好！创建一个工作代码段，以显示完整的示例。html和css（如果有的话）在哪里？类别定义在哪里？我编辑了这个问题。不是很好！创建一个工作代码段

var categories = document.querySelector('.filters ul');
async function populateCategories() {
    const categoriesUrl = '/api/products/categories';
    const response = await fetch(categoriesUrl);
    const categoriesResp = await response.json();

    for (let category of categoriesResp) {
        let template = `<a>${category}</a>`;
        let appendedCategory = document.createElement('li');
        appendedCategory.innerHTML = template;
        categories.append(appendedCategory);
        appendedCategory.addEventListener('click', () => {
            highlightClas(appendedCategory);
        });
    }
}