Question

我在菜单中分配了一个活动班级，但是活动班级并未从移动菜单中删除，它始终保持活动状态。而且，如果选择了子类别，则我希望类别本身具有一个活动的类。我尝试过，但不能。在此先感谢提供帮助的朋友。

例如，如果打开category1.php页面，则“类别”具有停用的类。

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);

<div class="header_side_container">
    <div class="header_builder_component">
        <nav class="main-menu">
            <ul id="menu-main-menu" class="menu">
                <li class="menu-item">
                    <a href="home.php"><span>Home</span></a>
                </li>
                <li class="menu-item">
                    <a href="#"><span>category</span></a>
                    <ul class="sub-menu">
                        <li class="menu-item">
                            <a href="Category1.php">
                                <span>Category 1</span>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="Category2.php">
                                <span>Category 2</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="menu-item">
                    <a href="gallery.php"><span>gallery</span></a>
                </li>
                <li class="menu-item">
                    <a href="about.php"><span>about</span></a>
                </li>
                <li class="menu-item">
                    <a href="contact.php"><span>contact</span></a>
                </li>
        </nav>
    </div>
</div>

<!--Mobil-->
<nav class="mobile_menu">
    <ul id="menu-top_menu-1">
        <li class="menu-item">
            <a href="home.php"><span>Home</span></a>
        </li>
        <li class="menu-item">
            <a href="#"><span>category</span></a>
            <ul class="sub-menu">
                <li class="menu-item">
                    <a href="Category1.php">
                        <span>Category 1</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="Category2.php">
                        <span>Category 2</span>
                    </a>
                </li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="gallery.php"><span>gallery</span></a>
        </li>
        <li class="menu-item">
            <a href="about.php"><span>about</span></a>
        </li>
        <li class="menu-item">
            <a href="contact.php"><span>contact</span></a>
        </li>
    </ul>
</nav>

Answer 1

window.location.pathname是您需要的属性。拥有后，可以使用.substr和.lastIndexOf查找文件名（整个路径名的最后一部分）。

在此代码段中， active 项目是JS的父级，我以该示例为例，因为这些SO代码段的location.href是 { {3}} ，因此路径名是 / js ，最后文件名是 js 。

检查代码，您会明白我的意思

HIH

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(anchor.href.indexOf(url) > -1) {
        const parentLI = $(li).parents('.menu-item').get(0)
        if(parentLI)
          parentLI.classList.add("active");
        else 
          li.classList.add("active");
      } 
   });
}

const pathname = window.location.pathname, filename=pathname.substr(pathname.lastIndexOf('/') + 1);


updateMenu(filename);

li.active > a span{
  font-weight: bold !important;
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header_side_container">
    <div class="header_builder_component">
        <nav class="main-menu">
            <ul id="menu-main-menu" class="menu">
                <li class="menu-item">
                    <a href="home.php"><span>Home</span></a>
                </li>
                <li class="menu-item">
                    <a href="#"><span>category</span></a>
                    <ul class="sub-menu">
                        <li class="menu-item">
                            <a href="Category1.php">
                                <span>Category 1</span>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="js">
                                <span>JS</span>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="Category2.php">
                                <span>Category 2</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="menu-item">
                    <a href="gallery.php"><span>gallery</span></a>
                </li>
                <li class="menu-item">
                    <a href="about.php"><span>about</span></a>
                </li>
                <li class="menu-item">
                    <a href="contact.php"><span>contact</span></a>
                </li>
                </ul>
        </nav>
    </div>
</div>

<!--Mobil-->
<nav class="mobile_menu">
    <ul id="menu-top_menu-1">
        <li class="menu-item">
            <a href="home.php"><span>Home</span></a>
        </li>
        <li class="menu-item">
            <a href="#"><span>category</span></a>
            <ul class="sub-menu">
                <li class="menu-item">
                    <a href="Category1.php">
                        <span>Category 1</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="js">
                        <span>JS too</span>
                    </a>
                </li>

                <li class="menu-item">
                    <a href="Category2.php">
                        <span>Category 2</span>
                    </a>
                </li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="gallery.php"><span>gallery</span></a>
        </li>
        <li class="menu-item">
            <a href="about.php"><span>about</span></a>
        </li>
        <li class="menu-item">
            <a href="contact.php"><span>contact</span></a>
        </li>
    </ul>
</nav>

html菜单和子菜单处于活动状态

1 个答案: