Добавить/Удалить класс на основе активного URL

Question

Мой HTML код выглядит следующим образом:

<div id="sidebar-menu" class="main_menu_side hidden-print main_menu"> 
    <div class="menu_section"> 
     <ul class="nav side-menu"> 
      <li> 
       <a> 
        <i class="fa fa-home"></i>home 
        <span class="fa fa-chevron-down"></span> 
       </a> 
       <ul class="nav child_menu" style="display: none"> 
        <li> 
         <a href="testing2.php">Dashboard</a> 
        </li> 
        <li> 
         <a href="testing2.php#x-test">dashbord2</a> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <a> 
        <i class="fa fa-edit"></i>form 
        <span class="fa fa-chevron-down"></span> 
       </a> 
       <ul class="nav child_menu" style="display: none"> 
        <li> 
         <a href="genform.php">general form</a> 
        </li> 
        <li> 
         <a href="formval.php">form validation</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

добавить/удалить класс на основе текущего URL, я использую это:

$(function() { 
    var url = window.location.href; 
    $('#sidebar-menu a[href="' + url + '"]').parent('li').addClass('current-page'); 
    $('#sidebar-menu a').filter(function() { 
     return this.href == url; 
    }).parent('li').addClass('current-page').parent('ul').slideDown().parent().addClass('active'); 
}); 

Он работает, но когда я нажмите на эту ссылку

<a href="testing2.php#x-test">dashbord2</a> 

класс = «ток-страница» не меняется на текущий путь URL
Как я это исправить?

Answer 1

Ваша проблема возникает из-за того, что страница не перезагружается, когда вы нажимаете на ссылку с хешем, в то время как ваш код выполняется только при загрузке страницы, или dom готов к тому, чтобы быть точным. Решение состоит в том, чтобы ли hashchange событие использования окна (не поддерживается в < IE8) или, как @sirrocco упоминалось, используйте click событие с setTimeout обнаружить изменение хэша:

function setCurrentMenuPage() { 
    var url = window.location.href; 
    var anchors = $('#sidebar-menu a'); 
    anchors.parent('li').removeClass('current-page'); 
    anchors.filter(function() { 
     return this.href == url; 
    }).parent('li').addClass('current-page').parent('ul').slideDown().parent().addClass('active'); 
} 
$(function() { 
    setCurrentMenuPage(); 
    $('#sidebar-menu a').on('click', function (e) { 
     if ($(this).attr('href').indexOf("#") >= 0) { 
      setTimeout(function() { 
       setCurrentMenuPage(); 
      }, 100); 
     } 
    }); 
}); 

Надежда, что помогает.