Naivgate tabs by url HTML

Let’s say I have this ul which filters a grid of items based on data-filter:

<ul>
    <li><a href="#" data-filter="l1">Link1</a></li>
    <li><a href="#" data-filter="l2">Link2</a></li>
    <li><a href="#" data-filter="l3">Link3</a></li>
    <li><a href="#" data-filter="l4">Link4</a></li>
</ul>

When entering the url like this: www.something.com/#l1, I want to simulate a click on Link1. And when manually clicking on Link1, I want to add to the url /#l1.

I can use jQuery to add a $(document).ready() function, to get the querystring from the URL and clicking with .click(). But I have no idea how to change the url when clicking on a <a>.

Is there a simpler way of doing this?