單擊鏈接將活動類添加到導航菜單

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