Web development show/hide
after refresh

Question

I am working on a website for a restaurant that has a header with the following tabs:

"home"
"menu"
"about"

I want to switch between the tabs while staying in the same page, but only changing the contents of it according to the chosen tab.

I managed to do that with jQuery by hiding <div>s and showing the one I want by adding and removing classes. The problem is that whenever I refresh the page it returns to the main home page that are set to show when page is loaded.

So my question is: is there a way to make the webpage refresh with the changed classes made???

An alternate to `localStorage` is using the location hash provided by the `location` object. When clicking a link with a `href` of `#yourtab` it does not make the page load, however, it does alter the url. When refreshing the page the hash isn't lost and you can determine which tab you're on with that. — Wild Beard, Mar 25 '15 at 21:22

score 3 · Answer 1 · answered Mar 25 '15 at 20:31

Without involving any work from the backend, you can store that information thru localStorage.

Like so:

localStorage.setItem("currentPage", "HomePage");
localStorage.setItem("favoriteColor", "Red");

On page load, you can do some error handling in case these properties have never been set, like so:

if(!localStorage.getItem("currentPage"))
{
    localStorage.setItem("currentPage", "HomePage");
}

score 1 · Answer 2 · answered Mar 25 '15 at 20:21

1

You need to maintain state between reloads, which is generally accomplished via sessions or cookies.

Your server-side language should have a method for that. Such as sessions for PHP. Or you could use cookies locally.

answered Mar 25 '15 at 20:21

Spechal

2,634
6
32
48

score 0 · Answer 3 · answered Mar 25 '15 at 20:34

are you tested the onload of the tag ?

try to put your class changes on a javascript function and ejecute the function in the body tag with onload.

Like this:

Web Code...

function loadClasses(){ JQuery Changes Here.. }

score 0 · Accepted Answer · edited May 23 '17 at 11:56

One way is to use local storage. Simply whenever one of your header tabs is click save something in your local storage using JavaScript. like this:

    localStorage.setItem('page', 'home');

You can over write this value by calling it again and passing a new value into it.

Set display: none; for all of your divs and show them based on your loacal storage value. On the page load you can get the value and show the div with the same id as the local storage value like so:

    var page = localStorage.getItem("page");
    if(page){
        // change the tab based on page's value
        $('div#' + page).show();
    }else{
        // Go to your default page, assuming its default is home page
        $('div#home').show();
    }

You can always see what is saved in your local storage by using Chrome developer tool > Resources > Local Storage.

Remember that you can only store string values in your local storage. But the way around it is to store JSON.stringify and JSON.parse.

If you wanna know more about browser support or anything else you can always read more about local storage:

References:

Web development show/hide after refresh

4 Answers4

Web development show/hide
after refresh