Use JavaScript to highlight the current page

Question

I am rather new to javascript so any help would be great... thanks in advance. The following is working but when I click an option, it turns purple, the page refreshes and then purple goes away. Any ideas? I would like the option selected to stay purple on page refresh. AKA, show me what page I am on.

Here is what I have:

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

score 1 · Accepted Answer · answered Jun 29 '18 at 21:25

All the classes are removed and reset on pageload. As you are passing query params, you could read them on page load and set the class accordingly.

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 function is taken from How can I get query string values in JavaScript?

Use JavaScript to highlight the current page

1 Answers1