php - 如何动态更改(添加)事件状态类到导航链接

Question

您好，我正在尝试创建一个投资组合网站。为了不必为每个页面重新创建 header ，我决定使用 PHP include 函数添加它。我现在唯一的问题是，当我单击链接导航到另一个页面时，active 链接没有分别发生变化。
包含的 HTML

<ul id="main-menu">
     <li><a href="index.php" class="active">home</a></li>
     <li><a href="about.php">about us</a></li>
     <li><a href="portfolio.php">portfolio</a></li>
     <li><a href="contact.php">contact</a></li>
</ul>

Javascript:

 $(document).ready(function(){
    var $menu = $("ul#main-menu li a");                
    $menu.click(function(){
        $menu.each(function(){
            $(this).removeClass("active");
        });
        $(this).addClass("active");                  
    });
 });

我知道问题是每次加载页面时，它都会将 active 类重置为第一个链接。我不知道的是:如何将 active 类动态添加到页面匹配链接？

Answer 1

你需要这个:

  $(document).ready(function(){
        var i = document.location.href.lastIndexOf("/");
        var currentPHP = document.location.href.substr(i+1);
        $("ul#main-menu li a").removeClass('active');
        $("ul#main-menu li a[href^='"+currentPHP+"']").addClass('active');
  });