javascript - 如何在页面重新加载时保留 Jquery 函数

Question

如何在离开页面时保留 Jquery 函数？ 当链接为空白/# 时，下面的代码运行良好，但是当我更改 # 并将其设为路径链接时，jquery 似乎无法正常运行。我点击它，它改变了背景，但是当它转到链接时，背景消失了，我在代码中遗漏了什么吗？

$(document).ready(function(e){
  $('#main-menu li a').click(function(e) {
    $('#main-menu li a').removeClass('active');
    $(this).addClass('active');
  });
});

#main-menu li {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  padding: 17px 25px;
}
#main-menu li a {
  color:#333333;
  font-size:15px;
}
#main-menu li.active a {
  color:#0198cf;
}
#main-menu li:last-child  {
  padding-right: 0;
}

.active{
  background-color:#ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="topnav" id="main-menu">
  <li ><a href="#" class="active" ><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
  <li><a href="#" ><i class="fa fa-file" aria-hidden="true"></i> Home2</a></li>
  <li><a href="#" ><i class="fa fa-codepen" aria-hidden="true"></i> Home3</a></li>
  <li><a href="#" ><i class="fa fa-globe" aria-hidden="true"></i> Home4</a></li>
</ul>

Answer 1

添加这个脚本:

$(function () {
    var url = window.location.pathname,
    urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
    $('#main-menu li a').each(function () {
        if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
            $(this).addClass('active');
            $(this).parent().previoussibling().find('a').removeClass('active');
        }
    });
});