如何在重新加载页面时保留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');
}
});
});

Answer 2

您需要停止元素的默认行为。您应该为您的点击事件调用preventDefault函数：

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

Answer 3

如果用户离开当前页面，jQuery修改的样式将永久消失，因为它们不会保存在任何地方。

但是，使用javascript可以存储cookie，如果存在cookie，则可以添加所需的背景样式。

请参阅https://www.w3schools.com/js/js_cookies.asp了解有关存储cookie的更多信息。