rizwansyed Posted August 13, 2018 Share Posted August 13, 2018 Hi Am using <meta http-equiv="refresh" content="5"> for page refresh for every 5 seconds in HTML. I have 6 to 7 tabs in my page. If am in 5th tab , after refresh it goes to default page. How can i stay in 5th tab only even after refresh in HTML. Thanks and Regards Rizwan Syed Link to comment Share on other sites More sharing options...
dsonesuk Posted August 13, 2018 Share Posted August 13, 2018 local storage or cookie, when you go to any tab store where you are, then on reload read the stored info to return to that tab. Link to comment Share on other sites More sharing options...
Funce Posted August 14, 2018 Share Posted August 14, 2018 Yep! You'll need to play with some Javascript for this one! I'd like to ask why you'd need to refresh the page every five seconds. Is there data that needs updating? Link to comment Share on other sites More sharing options...
rizwansyed Posted August 14, 2018 Author Share Posted August 14, 2018 Hi Funce Thanks for the reply. I have a dynamic data which keeps on updating.So i need a refresh. Do you have any java script for this implementation. Thanks and Regards Rizwan Syed 1 Link to comment Share on other sites More sharing options...
rizwansyed Posted August 14, 2018 Author Share Posted August 14, 2018 Hi Dsonesuk Any example you have to read the stored info. Thanks and Regards Rizwan Syed Link to comment Share on other sites More sharing options...
dsonesuk Posted August 14, 2018 Share Posted August 14, 2018 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0"> <title>Document Title</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <style> #tabList1, #tabList1 li {list-style-type: none; margin: 0; padding: 0; text-indent:0;} #tabList1 li {display: inline-block; width: 100px; padding: 0.2em 0.8em; background: #ccc;} #tabList1 li.active {background: yellow;} </style> </head> <body> <div> <ul id="tabList1"> <li onclick="storeActive(this)">Tab #1</li> <li onclick="storeActive(this)">Tab #2</li> <li onclick="storeActive(this)">Tab #3</li> <li onclick="storeActive(this)">Tab #4</li> </ul> </div> <script> var parentElem = document.getElementById("tabList1"); var childLI = parentElem.getElementsByTagName("LI"); if (localStorage.activeLI) { childLI[localStorage.activeLI].className = "active"; } else { childLI[0].className = "active"; } function storeActive(elem) { for (var i = 0; i < childLI.length; i++) { childLI[i].className = childLI[i].className.replace('active', ''); if (childLI[i] === elem) { childLI[i].className = "active"; localStorage.activeLI = i; } } } </script> </body> </html> Link to comment Share on other sites More sharing options...
rizwansyed Posted August 14, 2018 Author Share Posted August 14, 2018 Hi Dsonesuk Am trying to do it in HTML.Am not getting it. How to use localstorage in html.I tried like below code . https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs <script> function openCity(evt, cityName) { var i, tabcontent, tablinks,temp; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent.style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks.className = tablinks.className.replace(" active", ""); if (tablinks === cityName) { tablinks.className = "active"; localStorage.activeLI = i; } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } </script> Please suggest with this, how to proceed. Thanks and Regards Rizwan Syed Link to comment Share on other sites More sharing options...
dsonesuk Posted August 14, 2018 Share Posted August 14, 2018 https://www.w3schools.com/code/tryit.asp?filename=FU0NNTG53Z27 1 Link to comment Share on other sites More sharing options...
rizwansyed Posted August 16, 2018 Author Share Posted August 16, 2018 Thank you Dsonesuk It works fine On 8/14/2018 at 9:12 PM, dsonesuk said: https://www.w3schools.com/code/tryit.asp?filename=FU0NNTG53Z27 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