如何使用History API或history.js更改“活动"目录.刷新页面或按下后退按钮时是否正确链接?

问题描述：

我的活动(打开的)链接用 JS 突出显示.

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>

链接示例

<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类添加到适当的链接.

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

所以，我的问题是在刷新页面或按下后退按钮时，如何使用History API或history.js适当地更改活动"链接?

答

您可以轻松完成

<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存储单击的链接状态吗?

如何使用History API或history.js更改“活动"目录.刷新页面或按下后退按钮时是否正确链接?

相关推荐