Keep active pill on refresh, Bootstrap 4

Question

I am creating a website using Bootstrap 4, and for my navigation bar, I am using pills for my buttons. The problem I want to fix is that if I am on a different tab and I refresh the page, it jumps back to the home page. I have seen many solutions for this for people who have used tabs instead, but not for pills. Here is the snippet of my code that other people usually provide for this kind of problem:

<div class="collapse navbar-collapse" id="navbarResponsive">
  <ul class="nav nav-pills navbar-nav ml-auto" id="pills-tab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-education-tab" data-toggle="pill" href="#pills-education" role="tab" aria-controls="pills-education" aria-selected="false">Education</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-skills-tab" data-toggle="pill" href="#pills-skills" role="tab" aria-controls="pills-skills" aria-selected="false">Skills</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-activities-tab" data-toggle="pill" href="#pills-activities" role="tab" aria-controls="pills-activities" aria-selected="false">Activities</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-projects-tab" data-toggle="pill" href="#pills-projects" role="tab" aria-controls="pills-projects" aria-selected="false">Projects</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
    </li>
  </ul>
</div>

It would be much appreciated if one of you guys can help out with this problem... Thanks in advance!

Answer 1

<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>

Your html specifies the initial active tab by putting the "active" class in the first pill. As that is clicked, bootstrap handles taking that class off and adding it to the new pill.

You need to set an onClick function for when one of the links to switch pills is clicked. That function should set a cookie or use local storage to record which pill is the latest to get the "active" class.

<a class="nav-link" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true" onClick="return saveTabSelect(this);">Home</a>

This tells the link click to call the function to store the setting

function saveTabSelect(e) {
  localStorage.setItem("tagSelected", e.id);
  return true;
}

You need to have function that runs on page Load that looks for the cookie or in local storage and then assigns the active class to the tab/pill specified or default to whatever if no setting is found. And because the script will assign that class, you want to pull it out of the html itself.

function retrieveSelected(){
  var curTag = localStorage.getItem("tagSelected");
  var element = document.getElementById(curTag);
  element.classList.add("active"); 
}