• jQuery

Please, note that the event window.onhashchange runs only in https://caniuse.com/hashchange.
It's only for the # changes on the url.

It's really simple, you just need to assign the data-urlspy pattern (regular expression) to the items of the menu and run the script! That's all!

$(document).ready( function(){
    $.url_menu_spy();
});            

    <ul class="nav">
        <li data-urlmenuspy="index.html(#*)$" ><a href="#">Index</a></li>
        <li data-urlmenuspy="#requirements$" ><a href="#requirements">Requirements</a></li>
        ...
    </ul>            

For other html you only need to change the class_select option to your change (ex: selected) and the sub_element_path.

data_urlspy_name: 'urlspy' - The name of the data tag.\

class_select: 'active' - The class to assign for the menu spy item\

sub_element_path: '' - If it's assigned the script use the jQuery function find() to assign the class to another element according to this path.

This plugin is automatic...but if you need to use this functions...

$.findspymenu() - Find the Spymenu items and active them\

$.clear_active() - Clear all the active Spymenu items.\

https://bichotll.github.io/url-menu-spy/