Add/Remove class based on active URL

Question

My HTML code looks like this:

<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>

to add/remove class based on current url, i am using this:

$(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');
});

It works, but when i click this link

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

the class="current-page" doesn't change to current path url
How i fix this?

Answer 1

Your issue arises from the page not being reloaded when you click on the link with hash in it, while your code only executes on page load, or dom ready to be exact. The solution is to whether use window's hashchange event (not supported in < IE8) or, like @sirrocco mentioned, use click event with setTimeout to detect the change of hash:

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

Hope that helps.