Javascript li类活动页

我可以用我在导航菜单a中编写的代码添加它，但我想将它添加到li类而不是a href。我希望这个事件从页面的开头开始

通常，当我现在这样使用它时，页面不会写为活动状态。如果你能帮忙，我会很高兴的

函数更新单元（url）{
const active=document.querySelector（'.main menu a.active'）；
如果（活动！==null）{
active.classList.remove（'active'）；
}
const links=Array.from（document.querySelectorAll（'.main menu a'））；
const index=links.map（link=>link.href）.findIndex（（href）=>{
返回url.indexOf（href）！=-1；
});
如果（索引！=-1）{
链接[index].classList.add（'active'）；
}
}
barba.hooks.before（（数据）=>{
updateNu（data.trigger.href）；
});

您可以在列表项中循环，抓住列表项中的锚点，比较URL并根据需要将活动类添加到列表项中，而不是在锚点之间循环

为此，不需要

map

，您可以使用普通的

foreach

和

if

语句

    <div class="middle_right right header_side">
    <div class="header_side_container">
    <div class="header_builder_component header_builder_menu_component">
    <nav class="main-menu main_menu_container menu_line_enable">
    <ul id="menu-main-menu" class="menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1032">
    <a href="home.php"><span>Home</span></a>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1033">
    <a href="videos.php"><span>videos</span></a>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1034">
    <a href="gallery.php">
    <span>gallery</span>
    </a>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1035">
    <a href="about.php">
    <span>about</span>
    </a>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1036">
    <a href="contact.php">
    <span>contact</span>
    </a>
    </li>
    </nav>
    </div>
    </div>
    </div>
    function updateMenu(url) {
            const active = document.querySelector('.menu-item.active');
    
            if (active !== null) {
                active.classList.remove('active');
            }
    
            const links = Array.from(document.querySelectorAll('.menu-item'));

            links.forEach(function(li){
               let anchor = li.querySelector("a");
               if(url.indexOf(anchor.href) > -1){
                   li.classList.add("active");
                }
            });
        }

      updateMenu(window.location.href);

   /* barba.hooks.before((data) => {
            updateMenu(data.trigger.href);
        });
*/

函数更新单元（url）{
const active=document.querySelector（'.menu item.active'）；
如果（活动！==null）{
active.classList.remove（'active'）；
}
const links=Array.from（document.querySelectorAll（'.menu项'）；
links.forEach（函数（li）{
设anchor=li.querySelector（“a”）；
if（url.indexOf（anchor.href）>-1）{
li.classList.add（“活动”）；
}
});
}
updateMenu（window.location.href）；
/*barba.hooks.before（（数据）=>{
updateNu（data.trigger.href）；
});
*/

谢谢您的回答，但是当您编写时，没有代码删除事件。活动类仍保留在我单击的li类中。谢谢，但您的答案没有根据打开页面时打开的URL激活。@KaanDemir我通过禁用您的

barba

代码更新了我的答案，并在另一个调用中添加了

updateMenu

我接受了您的答案。嗯，如果我在它下面使用BABA会有问题吗？@KaanDemir我不知道BABA代码是什么，但是如果它通过了正确的href，你可以使用它而不是调用

updateMenu（window.location.href）。