使用JavaScript突出显示当前页面

我对javascript比较陌生，所以任何帮助都会很好。。。提前谢谢。下面的操作正常，但当我单击某个选项时，它会变成紫色，页面刷新，然后紫色消失。有什么想法吗？我希望选择的选项在页面刷新时保持紫色。阿卡，让我看看我在哪一页

以下是我所拥有的：

<div>
  <table class="news-pages">
    <tr class="news-pages">
     <td class="news-pages-option"><a href=<%- `/news?p=1` %>>1</a></td>
     <td class="news-pages-option"><a href=<%- `/news?p=2` %>>2</a></td>
     <td class="news-pages-option"><a href=<%- `/news?p=3` %>>3</a></td>
     <td class="news-pages-option"><a href=<%- `/news?p=4` %>>4</a></td>
     <td class="news-pages-option"><a href=<%- `/news?p=5` %>>5</a></td>
     <td class="news-pages-option"><a href=<%- `/news?p=6` %>>6</a></td>
     <td class="news-pages-option"><a href=<%- `/news?p=7` %>>7</a></td>
     <td class="news-pages-option"><a href=<%- `/news?p=8` %>>8</a></td>
     <td class="news-pages-option"><a href=<%- `/news?p=9` %>>9</a></td>
    </tr>
  </table>
</div>


<script>
$(document).ready(function() {
$(".news-pages-option").click(function () {
$(".news-pages-option").removeClass("active");
$(this).addClass("active");
});
});
</script>


.news-pages-option.active {
background-color: purple;
}

$（文档）.ready（函数（）{
$（“.news pages选项”）。单击（函数（）{
$（“.news pages选项”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
});
});
.news-pages-option.active{
背景颜色：紫色；
}

所有类都将在pageload上删除并重置。在传递查询参数时，可以在页面加载时读取它们并相应地设置类

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}


const page = getParameterByName('p');
$('td.news-pages-option a[href*="p=' + page + '"]').parent().addClass('active');

getParameterByName函数取自