Question 192008 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to make the JavaScript added class not vanish after clicking the link

On the blog page I made a category to show the highlighted category that is selected I used JavaScript to add a class called active but after clicking the category the JavaScript did put the class but after page load the added css is gone so the highlight is also gone.

I want the JavaScript added CSS to not be gone after page load.

JavaScript

const tabs = document.querySelectorAll("[data-tab-target]");
const tabContents = document.querySelectorAll("[data-tab-content]");

tabs.forEach((tab) => {
    tab.addEventListener("click", () => {
        const target = document.querySelector(tab.dataset.tabTarget);
        tabContents.forEach((tabContent) => {
            tabContent.classList.remove("active");
        });
        tabs.forEach((tab) => {
            tab.classList.remove("active");
        });
        tab.classList.add("active");
        target.classList.add("active");
    });
});

category (blade)

 <div class="section-sp">
        <div class="category-box">
            <a data-tab-target="#all" class="category active" href="blog/?tag">All</a>
            <a data-tab-target="#code" class="category" href="blog/?tag=Coding">Coding</a>
            <a data-tab-target="#covid" class="category" href="blog/?tag=Covid-19">Covid-19</a>
            <a data-tab-target="#ehr" class="category" href="blog/?tag=EHR">EHR</a>
            <a data-tab-target="#fa" class="category" href="blog/?tag=Financial Analysis">Financial Analysis</a>
            <a data-tab-target="#mb" class="category" href="blog/?tag=Medical Billing">Medical Billing</a>
            <a data-tab-target="#pe" class="category" href="blog/?tag=Patient Engagement">Patient Engagement</a>
            <a data-tab-target="#rcm" class="category" href="blog/?tag=RCM">RCM</a>
            <a data-tab-target="#th" class="category" href="blog/?tag=Telehealth">Telehealth</a>
            <a data-tab-target="#aaa" class="category">GGGG</a>
            <a data-tab-target="#www" class="category">GGGG</a>
        </div>
    </div>
Tags:

2

Answers


  1. 0

    A good way of trying to achieve this, is to store a reference of all the active tabs on your local storage. The local storage does not change when you reload the page so you will be able to retrieve all the active tabs on page load.

    An implementation of what I have just mentioned would look like:

    onst tabs = document.querySelectorAll("[data-tab-target]");
const tabContents = document.querySelectorAll("[data-tab-content]");

function populateActiveTabs = () => {
  const storedActiveTabs = localStorage.getItem("active-tabs");

  if (storedActiveTabs ? .length) {
    const activeTabs = JSON.parse(storedActiveTabs);

    activeTabs.forEach((activeTabId) => {
      const tab = document.getElementById(activeTabId);
      const target = document.querySelector(tab.dataset.tabTarget);

      tag.classList.add("active");
      target.classList.add("active");
    })
  }
}

function saveTabIdToStorage = (tabId: string) => {
  const storedActiveTabs = localStorage.getItem("active-tabs");

  if (storedActiveTabs ? .length) {
    const activeTabs = JSON.parse(storedActiveTabs);

    if (activeTabs.includes(tabId)) {
      localStorage.setItem("active-tabs", JSON.stringify(storedActiveTabs.filter((activeTabId) => activeTabId !== tabId))
      }
      else {
        localStorage.setItem("active-tabs", JSON.stringify([...activeTabs, tabId]))
      }
    } else {
      localStorage.setItem("active-tabs", JSON.stringify([tabId]))
    }
  }


  window.onload = (event) => {
    populateActiveTabs();
  };

  tabs.forEach((tab) => {
    tab.addEventListener("click", () => {
      const target = document.querySelector(tab.dataset.tabTarget);
      tabContents.forEach((tabContent) => {
        tabContent.classList.remove("active");
      });
      tabs.forEach((tab) => {
        tab.classList.remove("active");
      });
      tab.classList.add("active");
      target.classList.add("active");

      saveTabIdToStorage(tab.id);
    });
  });

    Make sure to assign a unique id to your tab elements in order for this solution to work.

    Login or Signup to reply.
  2. 0

    The other methods are over-complicated. You are calling each page with a url with the tag= in the url. All you need to do is have a javascript function run in document.ready that parses the url to determine which page you are on and puts the class back.
    Remember, when a page loads, it’s a different page whether or not it loads the same includes such as your menu. You have to pass the data yourself.
    In this case, you already are.

    var param = window.location.search;
if (param != "") {
   param = "blog/" + param; //get rid of leading ?
   let menuItem = document.querySelectorAll("a[href='"+param +"']");
   menuItem.classList.add("active");
}

    Now this is untested but it should detect the matching url in your menu and simply apply the class directly to it.
    Note: Your code is over-complicated. You can just select all menu items at once with querySelectorAll and remove "active" from all of them at once then add it to the one new one clicked on.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search