Force reload when url hash changes

Question

In my application there is a header menu. We have 5 menu items with same page url with different hash values such as

1. Home (www.sample.com)
2. Brand page 1(www.sample.com/test.html#brand1)
3. Brand page 2(www.sample.com/test.html#brand2)
4. Brand page 3(www.sample.com/test.html#brand3)
5. Brand page 4(www.sample.com/test.html#brand4)

All the brand pages will be navigated to the same page (test.html) but with different hash.

Problem: when I click any of the links of brand page from HOME, the page automatically navigates to test.html and check for hash tag and loads item through ajax automatically.

But when I click any of the brand page links inside the brand page, the page is not refreshing.

Answer 1

HTML:

<div id="menu">
    <a href="#1">brand 1</a>
    <a href="#2">brand 2</a>
</div>

JQ:

$(function() {

    $('#menu a').click(function(e){
        var url=$(this).attr('href');

        window.location.href=url;// ## change url with hash
        location.reload();       // ## reload page

        e.preventDefault();      // ## prevent default click action 
    })

})