javascript - 重定向到另一个页面时如何在链接或 li 上设置/保留 'active' 类？

Question

在我的 View 中，我有导航，但问题是当我单击链接并将我重定向到该页面时，它会失去事件类，并且再次成为事件的主页。谁能帮助我或为我指明正确的方向!
提前致谢。

查看:

<!-- Side Navbar -->
  <nav class="side-navbar shrinked">

      <!-- Sidebar Navidation Menus-->
      <ul class="list-unstyled">
          <li class="active"><a href="/User/Home"> <i class="icon-home"></i>Home </a></li>
          <li><a href="/User/AddEmployee"> <i class=" icon-grid"></i>EMP </a></li>
          <li><a href="/User/AddUser"> <i class="fa fa-bar-chart"></i>User </a></li>
      </ul>

  </nav>

JavaScript:

<script>
    $(function () {

        $('nav.side-navbar ul li a').on('click', function () {
            $(this).parent().addClass('active').siblings().removeClass('active');
        });


    });
</script>

Answer 1

当您加载新页面时，当前页面中的所有代码都会消失，并且您拥有的所有脚本将在新页面上再次运行。

您需要将页面的 url 与页面加载时的链接 url 进行比较。

尝试以下操作:

$(function() {
  $('nav.side-navbar ul li a').each(function() {
    var isActive = this.pathname === location.pathname;
    $(this).parent().toggleClass('active', isActive);
  });
});