full page tabs

[KamauM]

Hello,

I am new here. I have made a page with the "full page tabs". There are forms on the pages.

Instead of using the id="defaultOpen" I would like the last visited page to re-open after refresh.

I have tried several methods like cookies, session variables and hidden inputs, but it does not give the preferred result.

Is there a solution to this "problem"?

Regards

/Kamau

 

[dsonesuk]

Local storage https://www.w3schools.com/html/html5_webstorage.asp

When the user clicks tab, store an identifier  of that tab. Then on page loading check for that value and make that tab and page a tive and visible.

Edited November 5, 2019 by dsonesuk

[KamauM]

Thank you for your reply.

I tried that method, but the problem is that all pages are accessed at each refresh, even the ones not active. This results in that the code always get the storage given by the sequentially (in the code) last page.

Same goes for all other methods I mentioned.

Referring to the examples, all four are executed!:

<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p>Home is where the heart is..</p>
</div>

<div id="News" class="tabcontent">
  <h3>News</h3>
  <p>Some news this fine day!</p>
</div>

<div id="Contact" class="tabcontent">
  <h3>Contact</h3>
  <p>Get in touch, or swing by for a cup of coffee.</p>
</div>

<div id="About" class="tabcontent">
  <h3>About</h3>
  <p>Who we are and what we do.</p>
</div>

---- The last in the coding sequence will always be the one storing its specific details in the webstorage.

As a result, it does not work that way.

Greetings

/Kamau

[dsonesuk]

Depending how you make the selected tab active? you should use event such as 'click' to store the value of "Contact", which at the same time clearing ANY current  pages using "active" class and then a 'active' class to the element with id "Contact", All the others should be hidden by default so the active class will make makes it visible, you would at first check if webstorage is empty, then set first i.e id "Home" as having class "active".

[KamauM]

Sorry for delay, had a lot of other things to do.

I understand your reply and will try it as soon as I have the opportunity.

Will let you know.

However, if you can suggest how to store any session variable in the standard scriptroutine, I'd be very grateful.

I am using this function, directly copied from W3Schools:

---
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;

**** I suppose I would have to add code here ****

tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent.style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks.style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();


---

/Kamau

Edited November 8, 2019 by KamauM
part of message did not publish