li class 活动页面

Question

I can add it with the code I wrote in nav menu a, but I want to add it to li class instead of a href. and I want this event to start at the beginning of the page.

normally when I use it like this now, the page does not write active. I will be very happy if you can help.

<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('.main-menu a.active');
  if (active !== null) {
    active.classList.remove('active');
  }

  const links = Array.from(document.querySelectorAll('.main-menu a'));
  const index = links.map(link => link.href).findIndex((href) => {
    return url.indexOf(href) !== -1;
  });

  if (index !== -1) {
    links[index].classList.add('active');
  }
}

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

Answer 1

Instead of looping through the anchors, you can loop through the list items, and grab the anchor within the list item, and compare the URLs and add the active class to the list item as needed.

For this, map isn't needed, you can use a normal foreach and an if statement.

    <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);
        });
*/