jqueryを使用してhtml要素にclass = "active"を追加します

Question

私はWebページにリンクされたPHP外部ファイルに私のヘッダを持っています。 クリックすると、アクティブなクラスが追加されますが、アクティブなままではありません...何が間違っているのかわかりません！ 誰か助けてくれますか？

HTML（PHPファイル内）：

<ul class="site-header__list"> 
    <li class="site-header__item"> 
     <a class="site-header__link" href="index.php">Home</a> 
    </li> 
    <li class="site-header__item"> 
     <a class="site-header__link" href="portfolio.php">Portfólio</a> 
    </li> 

    <li class="site-header__item"> 
     <a class="site-header__link" href="empresa.php">Empresa</a> 
    </li> 

    <li class="site-header__item"> 
     <a class="site-header__link" href="contactos.php">Contactos</a> 
    </li> 
    </ul> 

のjQuery：

$('.site-header__item a').on('click', function() { 
    $(this).addClass('active'); 
    $(this).sibling().removeClass('active'); 
}); 

Answer 1

jQuery(document).on("ready page:change", function() { 

    if(window.location.href.indexOf("index.php") > -1){ //or You full URL 

     jQuery('.site-header__item a').addClass('active'); 
     //or other .site-header__item a 
     //ps. better use id not class or add some one more unique class for every button 
     // as this will add class active to all '.site-header__item a' 
    } 

}); 

そしてはい、それは理由の後にあります（ 'クリック'）イベントあなたの は、これは私のコードですページリロード。

Answer 2

以下のコードリクエストのURLに基​​づいて、ページのロード適切アクティブクラスを設定します：

<script type="text/javascript"> 
    $(function() { 
    // Set active state on menu element 
    var current_url = window.location.href.split('?')[0]; 
    var full_url = current_url + location.search; 
    var $navLinks = $("ul.site-header__list li a"); 
    // First look for an exact match including the search string 
    var $curentPageLink = $navLinks.filter(
     function() { 
     return $(this).attr('href') === full_url; 
     } 
    ); 
    // If not found, look for the link that starts with the url 
    if (!$curentPageLink.length > 0) { 
     $curentPageLink = $navLinks.filter(
     function() { 
      return $(this).attr('href').startsWith(current_url) || current_url.startsWith($(this).attr('href')); 
     } 
    ); 
    } 
    // If still not found, look for links that contain the page name only 
    if (!$curentPageLink.length > 0) { 
     $curentPageLink = $navLinks.filter(
     function() { 
      return $(this).attr('href').match(current_url) || 
      current_url.match($(this).attr('href')); 
     } 
    ); 
    } 
    $curentPageLink.parents('li').addClass('active'); 
    }); 
</script> 

を我々はすべて私たちのアプリケーションでこれを使用し、それが完璧に動作します：