CODEWITHSUNDEEP
javascript
AndrewK
AndrewK

Reputation: 29

Use JavaScript to highlight the current page

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

Upvotes: 1

Views: 43

Answers (1)

baao
baao

Reputation: 73241

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?

Upvotes: 1

Related Questions