KamauM Posted November 5, 2019 Share Posted November 5, 2019 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted November 5, 2019 Share Posted November 5, 2019 (edited) 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 Link to comment Share on other sites More sharing options...
KamauM Posted November 5, 2019 Author Share Posted November 5, 2019 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted November 5, 2019 Share Posted November 5, 2019 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". Link to comment Share on other sites More sharing options...
KamauM Posted November 8, 2019 Author Share Posted November 8, 2019 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now