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

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 代码：

其他页面.jsp

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

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

Answer 1

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

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

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