Question

this is a bit tricky to explain:
We got a website that contains various menus and apart from normal links it also has anchorlinks.
Now it’s not the problem to have the links generated there, but it is also desired to give them an “active”-state (= you’re on that website), specifically when you jumped to that section.

<ul class="active">
  <li class="active">
    <a href="index.php?id=30">Subsite</a>
    <ul>
      <li><a href="index.php?id=30#section_1">Section 1</li>
      <li><a href="index.php?id=30#section_2">Section 2</li>
      <li><a href="index.php?id=30#section_3">Section 3</li>
      <li><a href="index.php?id=30#section_4">Section 4</li>
    </ul>
  </li>
</ul>

Normal link behaviour:

You’re on home, you click in the menu and get to index.php?id=30
When you’re on id=30, the menu point will highlight.

How an active anchor should behave:

You’re on home, you click in the menu and get to index.php?id=30#section_1. When you’re on id=30, it’s not highlighted, but when you follow the link and are on id=30#section_1, it is (based on what is entered in the locationbar). When you remove the anchor in the locationbar and confirm, the highlighting should be removed (afaik, the website won’t reload, but jump to another section).

Is it possible to react to this jump-behaviour and listen to changes done to the location bar? Or do you have a different idea how to achieve this?

Answer 1

As Marc Baumbach pointed out in the comments-section to my question, this is exactly what I was looking for:

On – window.location.hash – Change?