单击链接将活动类添加到导航菜单

Question

我正在开发一个网页，其中我在单独的 html 文件中有页眉（包含导航菜单），例如 reusableheader.html 和页脚在单独的文件中，即 reusablefooter.html。

reusableheader.html:

<style>
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
  color: #3fbbc0;
  border-color: #3fbbc0;
}
</style>

<script>
         $(function(){
          var current_page_URL = location.href;
          $( "a" ).each(function() 
          {
             if ($(this).attr("href") !== "#") 
             {
               var target_URL = $(this).prop("href");
               if (target_URL == current_page_URL) 
               {
                  $("a").parent("li").removeClass("active");
                  $(this).parent("li").addClass("active");
                  return false;
               }
             }
          });
        });   
</script> 

<nav class="nav-menu d-none d-lg-block"> //set to fixed-top.
        <ul>
          <li class="active"><a class="nav-link" href="/hospital/">Home</a></li>
          <li><a class="nav-link" href="/hospital/aboutus">About</a></li>
          <li><a class="nav-link" href="/hospital/services">Services</a></li>
          <li><a class="nav-link" href="/hospital/departments">Departments</a></li>
          <li><a class="nav-link" href="/hospital/doctors">Doctors</a></li>
          <li class="drop-down"><a class="nav-link" href="#">Reach Us</a>
            <ul>
              <li><a class="nav-link" href="/hospital/contact">Contact Us</a></li>
              <li><a class="nav-link" href="#">Feedback</a></li>
              <li><a class="nav-link" href="#">Blogs</a></li>
              <li><a class="nav-link" href="#">Newsletters</a></li>
            </ul>
          </li>
        </ul>
      </nav><!-- .nav-menu -->

我在所有其他网页中都包含以下 javascript 代码：

otherpages.jsp

<script>
    $(function() {
        $("#header").load("reusableheader.html");
     });
</script>

上面的代码工作正常，即点击菜单项上的链接，它成为具有指定颜色的活动链接（在 css 中）但是当我向下滚动页面时，活动从当前活动链接转移回“家”链接。 我在这里做错了什么？

Answer 1

我认为问题在于删除 li 元素上的 active 类。当你有这么多 a 元素和父 li 元素时，你怎么能说 $("a").parent("li").removeClass("active");。

相反，创建一个新的 for 循环函数，如果找到 active 类，则删除该元素，无论它在列表中的哪个位置。还要在 li 元素的点击事件上添加逻辑，否则，它会一直寻找 URL 匹配并对其进行更改，并且如果将任何路径附加到 URL，它的行为就会很奇怪。

function removeClass() {
    var listItems = $(".nav-menu > ul > li");
    listItems.each(function (idx, li) {
        $(li).removeClass("active");
    });
}