Question

我对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;
}

Answer 1

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

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函数取自How can I get query string values in JavaScript?

使用JavaScript突出显示当前页面

1 个答案: