刷新页面或按下后退按钮时，如何使用History API或history.js适当地更改“活动”链接？

Question

My active (opened) links are highlighted with JS .

<script type="text/javascript">
    $(document).ready(function(){
        $("a.nav1").click(function() {
            $(".active").removeClass("active");
            $(this).addClass("active");
        });
    });
</script>

links example

<div id="navigation">              
    <ul>
        <li><a class="nav1" data-tab="#home" id="link-home"href="#home">Home</a></li>
        <li><a class="nav1" data-tab="#football" id="link-football" href="#football">Football</a></li>
        <li><a class="nav1" data-tab="#hockey" id="link-hockey"href="#hockey">Hockey</a></li>
    </ul>
</div>

But clicking on the back button or refreshing the page doesn't remove and/or add the .active class to the appropriate link.

So, my question is, how to use the History API or history.js to change the "active" link appropriately when the page is refreshed or when the back button is pressed?

Answer 1

You can do it easily

<script type="text/javascript">
  var loc = window.location.pathname;

   $('#navigation').find('a').each(function() {
     $(this).toggleClass('active', $(this).attr('href') == loc);
  });
</script>

css:

#navigation a.active{color: red}

OR

You can see this answer Store a clicked link state using jQuery?