刷新頁面或按下后退按鈕時，如何使用History API或history.js適當地更改“活動”鏈接？

Question

我的活動（打開）鏈接用JS突出顯示。

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

鏈接示例

<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>

但是，單擊后退按鈕或刷新頁面不會刪除和/或將.active類添加到適當的鏈接。

因此，我的問題是， 當刷新頁面或按下后退按鈕時 ， 如何使用History API或history.js適當地更改“活動”鏈接？

Answer 1

你可以輕松做到

<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}

要么

您可以看到此答案使用jQuery存儲單擊的鏈接狀態嗎？