title: JavaScript Pagination is Highlighting the Last Tab on the First Page
body: <p>Thanks for any help - new coder here...</p>
  
  <p>Having a problem regarding pagination (a news page that shows 20 posts per page - there are 5 pages in total that are navigated via table cells). The code below adds an active class (highlights the selected page number) to the current page you're on after class "news-pages-option" is selected. The default news page is accessed by selecting News on the top menu. The URL is www.website.com/news. </p>
  
  <p>The problem: 
  Going to the default news page (www.website.com/news) is highlighting the last number that is displayed on the page (see # 5 in the picture below). I would like the first number (1) to be highlighted when you go to www.website.com/news. </p>
  
  <p>For reference, if the second page is selected (viewing posts 21-41), the URL changes to www.website.com/news?p=2 ("/news?p=3" is page 3's articles and so on). </p>
  
  <p><a href="https://i.stack.imgur.com/biqF1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/biqF1.jpg" alt="Image Example"></a></p>
  
  <hr>
  
  <p>Here is the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table class="news-pages" id="paginator"&gt;
    &lt;tr&gt;
      &lt;% for(var i = 1; i &lt;= num_pages; i++) { %&gt;
        &lt;td class="news-pages-option"&gt;&lt;%-i%&gt;&lt;/td&gt;
      &lt;% } %&gt;
    &lt;/tr&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>JS (to load # of pages):</p>
  
  <pre><code>  $('#paginator tr td').on('click', function(){
      var loc = window.location;
      window.location = `${loc.protocol + '//' + loc.host + loc.pathname}? 
      p=${$(this).html()}`;
    });
  
    function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&amp;");
    var regex = new RegExp("[?&amp;]" + name + "(=([^&amp;#]*)|&amp;|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
  
    const page = getParameterByName('p') - 1;
    $('.news-pages-option:eq(' + page + ')').addClass('active');
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.news-pages-option {
    border: 2px solid #cccccc;
    border-radius: 3px;
    background-color: #FAFAFA;
    padding: 3px 6px 3px 6px;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
   }
  
  .news-pages-option:hover {
    background-color: #e1e1e1;
  }
  
  .news-pages-option.active {
    background-color: #cccccc;
    border: none;
    padding: 3px 8px 3px 8px;
    text-decoration: underline;
   }
  
  .news-pages-option.active:hover {
    background-color: #e1e1e1;
    border: 2px solid #cccccc;
    padding: 3px 6px 3px 6px;
    text-decoration: none;
   }
  </code></pre>